Warning about use of dpi in main.css #1474

adeelejaz · 2013-11-13T11:53:32Z

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 · 2013-12-21T11:18:37Z

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 · 2014-02-01T20:25:41Z

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

drublic · 2014-03-30T21:49:16Z

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

nhall · 2014-03-30T23:20:48Z

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 · 2014-03-31T05:36:49Z

Oh true. I forgot these. Thanks for testing. I'll update the date later
today.
On Mar 31, 2014 1:21 AM, "Nick Hall" [email protected] 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 · 2014-03-31T08:23:01Z

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 · 2014-03-31T08:25:16Z

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

ghost · 2014-03-31T08:26:12Z

Mac rMBP Chrome & Firefox working (green).

sturobson · 2014-03-31T08:34:43Z

(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 · 2014-03-31T10:37:14Z

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 · 2014-03-31T11:00:15Z

Android Opera Mini highres - Galaxy Nexus 4.3 - Green

alrra · 2014-03-31T11:09:56Z

@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 · 2014-03-31T13:37:14Z

Windows 7 Opera 21(Next) highres - Red

alrra · 2014-04-01T06:58:40Z

Riccardo Bianconi on twitter:
@LucasMoffitt on twitter:

stowball · 2014-04-01T07:28:04Z

@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 · 2014-04-02T14:43:50Z

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 · 2014-04-17T21:21:03Z

@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 · 2014-04-18T13:53:16Z

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 · 2014-04-19T09:36:14Z

Firefox 28 on high res Win 8.1 - Green

XhmikosR · 2014-10-16T07:16:43Z

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

sean1138 · 2014-10-16T18:46:23Z

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 · 2014-10-16T19:12:09Z

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 [email protected] 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 · 2014-10-16T20:38:42Z

@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 · 2014-10-18T12:37:54Z

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 · 2015-01-12T10:41:47Z

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.

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).
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.
Current media expression doesn't throw a warning in Chrome's console.

drublic · 2015-04-07T10:22:07Z

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 · 2015-04-07T11:14:12Z

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 · 2015-04-07T11:27:36Z

-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 :)

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 · 2015-04-10T11:50:42Z

Thank you all for helping us test this!

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

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

alrra added the css label Mar 2, 2014

alrra added this to the 5.1.0 milestone Mar 26, 2014

drublic self-assigned this Mar 30, 2014

alrra added the help wanted label Oct 21, 2014

drgullin mentioned this issue Jan 12, 2015

Getting console info about media query expression (Theme HiDPI support) drgullin/icheck#213

Open

alrra modified the milestones: 5.2.0, 5.1.0 Apr 1, 2015

drublic mentioned this issue Apr 7, 2015

PR for #1474: Update high resoultion media query #1691

Closed

drublic closed this as completed in 0d9f008 Apr 10, 2015

chris-pearce mentioned this issue May 11, 2015

Updated retina-bg-image mixin & created new respond-retina mixin. Fixes #123 chris-pearce/scally#127

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Warning about use of dpi in main.css #1474

Warning about use of dpi in main.css #1474

adeelejaz commented Nov 13, 2013

ghost commented Dec 21, 2013

alrra commented Feb 1, 2014

drublic commented Mar 30, 2014

nhall commented Mar 30, 2014

drublic commented Mar 31, 2014

albi commented Mar 31, 2014

d4rkr00t commented Mar 31, 2014

ghost commented Mar 31, 2014

sturobson commented Mar 31, 2014

stowball commented Mar 31, 2014

stowball commented Mar 31, 2014

alrra commented Mar 31, 2014

Abbe98 commented Mar 31, 2014

alrra commented Apr 1, 2014

stowball commented Apr 1, 2014

ADmad commented Apr 2, 2014

QWp6t commented Apr 17, 2014

drublic commented Apr 18, 2014

stowball commented Apr 19, 2014

XhmikosR commented Oct 16, 2014

sean1138 commented Oct 16, 2014

andreasbovens commented Oct 16, 2014

XhmikosR commented Oct 16, 2014

sean1138 commented Oct 18, 2014

drgullin commented Jan 12, 2015

drublic commented Apr 7, 2015

alrra commented Apr 7, 2015

drublic commented Apr 7, 2015

alrra commented Apr 10, 2015

Warning about use of dpi in main.css #1474

Warning about use of dpi in main.css #1474

Comments

adeelejaz commented Nov 13, 2013

ghost commented Dec 21, 2013

alrra commented Feb 1, 2014

drublic commented Mar 30, 2014

nhall commented Mar 30, 2014

drublic commented Mar 31, 2014

albi commented Mar 31, 2014

d4rkr00t commented Mar 31, 2014

ghost commented Mar 31, 2014

sturobson commented Mar 31, 2014

stowball commented Mar 31, 2014

stowball commented Mar 31, 2014

alrra commented Mar 31, 2014

Abbe98 commented Mar 31, 2014

alrra commented Apr 1, 2014

stowball commented Apr 1, 2014

ADmad commented Apr 2, 2014

QWp6t commented Apr 17, 2014

drublic commented Apr 18, 2014

stowball commented Apr 19, 2014

XhmikosR commented Oct 16, 2014

sean1138 commented Oct 16, 2014

andreasbovens commented Oct 16, 2014

XhmikosR commented Oct 16, 2014

sean1138 commented Oct 18, 2014

drgullin commented Jan 12, 2015

drublic commented Apr 7, 2015

alrra commented Apr 7, 2015

drublic commented Apr 7, 2015

alrra commented Apr 10, 2015