Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Warning about use of dpi in main.css #1474

Closed
adeelejaz opened this issue Nov 13, 2013 · 29 comments
Closed

Warning about use of dpi in main.css #1474

adeelejaz opened this issue Nov 13, 2013 · 29 comments
Assignees
Milestone

Comments

@adeelejaz
Copy link
Contributor

The following bit in the main.css throws up a warning in Chrome.
https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css#L217

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

Warning:

Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: print, not all, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)

A bit of researching as shows that dppx support is a bit lacking...

  • Chrome: 29.0
  • Firefox: 16.0
  • IE: No Idea
  • Opera: 12.10
  • Safari: No Idea

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/resolution#Browser_compatibility

I'll try to do some tests today and update if I find anything about support if Safari.

@ghost
Copy link

ghost commented Dec 21, 2013

According to http://drewwells.net/blog/2013/working-with-dppx/ , using both seems like a good idea.

In devices that don't support dppx, hopefully they report dpi correctly. The following would probably be a good fallback:

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

@alrra
Copy link
Member

alrra commented Feb 1, 2014

Also relevant to this discussion: https://bugs.webkit.org/show_bug.cgi?id=100865

@alrra alrra added the css label Mar 2, 2014
@alrra alrra added this to the 5.1.0 milestone Mar 26, 2014
@drublic
Copy link
Member

drublic commented Mar 30, 2014

So here are the findings:

Here is the test case. Expected result on non-high-resolution displays is a red background, on high res displays the background should be green.

With the updated media query I get all expected results for the following Browsers:

  • iOS Safari non-highres (iPad) - tested by @nhall
  • iOS Chrome highres (iPhone iOS 7)
  • iOS Safari highres (iPhone iOS 7)
  • Android Firefox highres - Android 4.4
  • Android Firefox highres - tested on Android 4.2 by @r_bianconi (via twitter)
  • Android Firefox highres - tested on Android 4.1 by @ADmad

  • Android Chrome highres -. Android 4.4
  • Android Chrome highres - tested on Android 4.2 by @r_bianconi (via twitter)
  • Android Chrome highres - tested on Android 4.1 by @ADmad
  • Android Chrome non-highres - tested on Android 4.2.2 by @QWp6t

  • Android Stock Browser highres - tested on Android 4.1 by @ADmad
  • Android Stock Browser highres - tested on Android 4.2 by @r_bianconi (via twitter)
  • Android Stock Browser highres - tested on Android 4.3 by @alrra
  • Android Stock Browser non-highres - tested on Android 4.2.2 by @QWp6t

  • Android Opera 20 highres - tested on Android 4.1 by @ADmad
  • Android Opera Mini highres - tested on Android 4.3 by @stowball

  • FFOS 1.1 Firefox Browser highres - tested by @sturobson

  • Windows Phone 7.5 non-highres
  • Windows Phone 8 non-highres
  • Windows Phone 8 highres

  • Desktop Chrome non-highres
  • Desktop Safari non-highres
  • Desktop Safari highres - tested by @albi
  • Desktop Chrome highres - tested by @albi
  • Desktop Firefox non-highres
  • Desktop Firefox highres - tested by @bransonwerner
  • Desktop IE 11/Win non-highres
  • Desktop IE 11/Win highres

Not supported:

  • Android 2.3 Browser - DPI MQ unsupported - tested by @sturobson
  • Palm Pre - DPI MQ unsupported - tested by @sturobson

Problematic:

  • Desktop Chrome Stable and Canary highres - Win 8.1 - Red - tested by @stowball
  • Desktop Opera 21/Windows highres - tested by @Abbe98

(Anyone of you fancy to test these?)

I did not take care of non-highres iPhones since they are not wildly in use anymore, I think.

This technique is not working on iOS Opera Mini (highres), it wasn't before too and I think Opera Mini does not support this rule. Maybe @andreasbovens can help here (#17)?

I'd suggest extending the ruleset as stated above.

Updated: 2014-04-18 13:34h GMT

@drublic drublic self-assigned this Mar 30, 2014
@nhall
Copy link

nhall commented Mar 30, 2014

I did not take care of non-highres iPhones since they are not wildly in use anymore, I think.

Probably not many but I'd guess a fairly high number of non-highres iPads. The @drublic test works well on a low resolution iPad for me.

@drublic
Copy link
Member

drublic commented Mar 31, 2014

Oh true. I forgot these. Thanks for testing. I'll update the date later
today.
On Mar 31, 2014 1:21 AM, "Nick Hall" notifications@github.com wrote:

I did not take care of non-highres iPhones since they are not wildly in
use anymore, I think.

Probably not many but I'd guess a fairly high number of non-highres iPads.
The @drublic https://github.com/drublic test works well on a low
resolution iPad for me.

Reply to this email directly or view it on GitHubhttps://github.com//issues/1474#issuecomment-39043758
.

@albi
Copy link

albi commented Mar 31, 2014

Max OS X 10.9.2 Safari 7.0.2 and Chrome 33.0.1750.152 (latest) on a Retina MacBook Pro is working as expected. Green.

@d4rkr00t
Copy link

OSX 10.9.2 Chrome Version 33.0.1750.152 MacBook Air 2013 — Red
iPhone 5s iOS 7.1 — Green

@ghost
Copy link

ghost commented Mar 31, 2014

Mac rMBP Chrome & Firefox working (green).

@sturobson
Copy link

(DPI MQ - unsupported) Android 2.3 Browser - Red
ZTE FFOS 1.1 (150-159dpi) - Firefox Browser - Green
Windows Phone 7.5 (90-99dpi) - Red
Palm Pre (dpi MQ - unsupported) - Red

@stowball
Copy link

  • Desktop Chrome highres - Win 8.1 VAIO Ultrabook - Red
  • Desktop IE 11/Win highres - Win 8.1 VAIO Ultrabook - Green
  • Windows Phone 8 highres - Nokia Lumia 1020 - Green

@stowball
Copy link

Android Opera Mini highres - Galaxy Nexus 4.3 - Green

@alrra
Copy link
Member

alrra commented Mar 31, 2014

@stowball can you provide more details about:

Desktop Chrome highres - Win 8.1 VAIO Ultrabook - Red

such as the exact Chrome version, if it is a stable/beta/dev/canary release.... or anything that might help us identify why the test outputs red. Thanks!

@Abbe98
Copy link

Abbe98 commented Mar 31, 2014

Windows 7 Opera 21(Next) highres - Red

@alrra
Copy link
Member

alrra commented Apr 1, 2014

@stowball
Copy link

stowball commented Apr 1, 2014

@alrra

such as the exact Chrome version, if it is a stable/beta/dev/canary release.... or anything that might help us identify why the test outputs red. Thanks!

Stable, latest Chrome: 33.0.1750.154 m
Also latest Canary: 36.0.1918.0

And here's the laptop I use: http://www.sony.com.au/product/svp1122ycg

@ADmad
Copy link

ADmad commented Apr 2, 2014

Sony Xperia P - Android 4.1.2

Green for all browsers below:

  • Stock android browser
  • Chrome 30.0.1750.170
  • Opera 20.0.1396.73172
  • Firefox 28.0.1

@QWp6t
Copy link
Contributor

QWp6t commented Apr 17, 2014

@drublic

Not tested yet:

  • Android Stock (4.0 or up) Browser non-highres
  • Android Chrome non-highres

Samsung Galaxy Tab 3 - 7" - 600x1024 - Android v4.2.2

  • Stock browser - red
  • Chrome - red

@drublic
Copy link
Member

drublic commented Apr 18, 2014

I've updated the test results above in #1474 (comment)

The problematic browsers are non-IE browsers on high-res displays on Windows. I have looked into this: Essentially Windows does not really have a high resolution mode. You can only scale things up, from what I found. Maybe anyone has more experience with that?

When I tested this on Windows with Chrome on a high-res display I had the problem, that Chrome itself looked like it was being scaled down by the OS. All websites were scaled as if they were on a 1dppx device.

The original media query does not work in my tests for browsers other than IE on Windows.

Does anyone know anything of the state of implementation in Chromium?
Also: Can someone please test Firefox on Windows with a high-resolution display? I think we did not include this yet.

My conclusion would be to add this media query as suggested. Reason being that it works better as before. I think browsers reporting false dppx is an issue with the implementation in those browsers.

@stowball
Copy link

Firefox 28 on high res Win 8.1 - Green

@XhmikosR
Copy link
Member

@drublic: desktop IE 11, Chrome and FF no high res is red as expected.

@sean1138
Copy link

Not sure what constitutes a hi-res desktop display outside of Apple products branded as 'retina'. I have a 2560x1600 30 inch Dell, works out to about 100ppi.
Windows 7 64 bit.
Firefox 32.03, Chrome 38, IE10, and Opera 12.17 are all red.

@andreasbovens
Copy link

Windows has an option to set a custom OS zoom level in percentages in the Configuration Panel (e.g. 150%). This then translates to a devicePixelRatio value of e.g. 1.5 in browsers that take this setting into account (e.g. Opera 25, possibly and likely others).

On 16 Oct 2014, at 20:47, sean z notifications@github.com wrote:

Not sure what constitutes a hi-res desktop display outside of Apple products branded as 'retina'. I have a 2560x1600 30 inch Dell, works out to about 100ppi.

Windows 7 64 bit.
Firefox 32.03, Chrome 38, IE10, and Opera 12.17 are all red.


Reply to this email directly or view it on GitHub.

@XhmikosR
Copy link
Member

@andreasbovens is right. I never used more than the default 100% DPI on Windows :/

Anyway, here are my test results:

  • Desktop Chrome non-highres -> red OK
  • Desktop Firefox non-highres -> red OK
  • Desktop IE 11/Win non-highres -> red OK
  • Desktop IE 11/Win highres -> red FAIL

Gotta love IE for one more time...

@sean1138
Copy link

Thanks for that clarification andreasbovens.
Windows 7 64 bit.
dpi @ 150%:
Firefox 32.03 - green
Chrome 38 - green
Opera 12.17 - red
IE10 - green

dpi @ 125%
Firefox 32.03 - green
Chrome 38 - red
Opera 12.17 - red
IE10 - green

dpi @ 100%
Firefox 32.03 - red
Chrome 38 - red
Opera 12.17 - red
IE10 - red

http://imgur.com/a/wnyUK - screenshots if they help.

@drgullin
Copy link

This media expression is used on http://apple.com:

@media print,
  only screen and (-webkit-min-device-pixel-ratio: 1.5),
  screen and (min-resolution: 144dpi),
  screen and (min-resolution: 144dppx) {
  // styles
}

It's likely a right choice.

  1. I don't think that we need to use "-o-min-device-pixel-ratio", since its related to Presto engine, while all the modern versions of Opera browser are based on Webkit engine. Older version of Opera Mini is the only browser that use Presto engine (server-side rendering).
  2. Styles used by Apple are related to >=1.5 dpr. We likely don't need to load a large sized graphics (a main retina styles purpose) for the screens whose dpr <1.5.
  3. Current media expression doesn't throw a warning in Chrome's console.

@alrra alrra modified the milestones: 5.2.0, 5.1.0 Apr 1, 2015
@drublic
Copy link
Member

drublic commented Apr 7, 2015

Based on our findings and current situation in browsers here is my suggestion:

I don't think we need -o-min-device-pixel-ratio anymore.

since its related to Presto engine, while all the modern versions of Opera browser are based on Webkit engine.

Right, @fronteed.

So the new media query would be:

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
}

This is basically what Apple uses, @fronteed.


This does not fix false-positives on Windows which result from a problem with Windows' hi-resolution mode. I don't think this is a problem we can handle which is why I would opt for not caring to much about it at the moment.
We should revisit this when something new comes up in the area of Windows hi-res mode.

Any more input on this issue? Are you happy with this solution?

@alrra
Copy link
Member

alrra commented Apr 7, 2015

I don't think we need -o-min-device-pixel-ratio anymore.

@drublic, @fronteed -o-min-device-pixel-ratio has already been removed (see: #1682 (comment), and c7057be + 9581cf3).

@drublic
Copy link
Member

drublic commented Apr 7, 2015

-o-min-device-pixel-ratio has been already removed (see: #1682 (comment), and c7057be + 9581cf3).

Yup, saw that. Just wanted to make sure to take off where we were when the discussion ended last year :)

drublic added a commit that referenced this issue Apr 7, 2015
This commit adds a the dppx variant of min-resolution to add an easier
to use value for the media query. `dppx` is not supported by all
browsers and needs the `dpi` fallblack.
`dppx` is more acurate than `dpi` since dots per inch refers to a
defined size of pixels wher one inch is 96px what so ever and does not
take physical inches into account.
Autoprefixer will include `-webkit-min-device-pixel-ratio` which is
needed for Safari and WebKit devices.

Reference #1474.
drublic added a commit that referenced this issue Apr 7, 2015
This commit adds a the dppx variant of min-resolution to add an easier
to use value for the media query. `dppx` is not supported by all
browsers and needs the `dpi` fallblack.
`dppx` is more acurate than `dpi` since dots per inch refers to a
defined size of pixels wher one inch is 96px what so ever and does not
take physical inches into account.
Autoprefixer will include `-webkit-min-device-pixel-ratio` which is
needed for Safari and WebKit devices.

Reference #1474.
@alrra
Copy link
Member

alrra commented Apr 10, 2015

Thank you all for helping us test this!

eleanor-byhook pushed a commit to eleanor-byhook/html5-boilerplate that referenced this issue Feb 29, 2016
Add `dppx` variant of `min-resolution` to the high resolution media
query as `dppx` is more accurate¹ than `dpi`.

Notes:

 * since `dppx` is not supported by all browsers the media query
   still needs the `dpi` fallback

 * this change removes the `dppx` related warning² from Blink based
   browsers (e.g.: Chrome, Opera)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

¹ `dpi` (dots per inch) refers to a defined size of pixels where one
  inch is `96px` no matter what, so it does not take into consideration
  the physical inches.

² "Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch,
   not dots-per-physical-inch, so does not correspond to the actual 'dpi'
   of a screen. In media query expression: print,
   (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)"

Fix h5bp/html5-boilerplate#1474
Close h5bp/html5-boilerplate#1691
jeffreznik pushed a commit to jeffreznik/sw-test that referenced this issue Oct 15, 2017
Add `dppx` variant of `min-resolution` to the high resolution media
query as `dppx` is more accurate¹ than `dpi`.

Notes:

 * since `dppx` is not supported by all browsers the media query
   still needs the `dpi` fallback

 * this change removes the `dppx` related warning² from Blink based
   browsers (e.g.: Chrome, Opera)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

¹ `dpi` (dots per inch) refers to a defined size of pixels where one
  inch is `96px` no matter what, so it does not take into consideration
  the physical inches.

² "Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch,
   not dots-per-physical-inch, so does not correspond to the actual 'dpi'
   of a screen. In media query expression: print,
   (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)"

Fix h5bp#1474
Close h5bp#1691
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests