Sent by Micky Hulse on 16 July 2012 02:02
Hi Philippe! Thanks for the help, I really appreciate it.
On Sun, Jul 15, 2012 at 5:11 PM, Philippe Wittenbergh [EMAIL-REMOVED]> wrote:
> And those will work on a Retina MBP, fwiw.
Awesome. Thanks for checking! :)
> Correct, the 'min' stands for minimum, thus anything that is equal to
> 1.5 or higher.
Great! Thanks for the clarification.
> Whether it is a good idea to blindly go for all devices
> that return a value of 1.5 + is 'nother discussion, in the light of
> persistent internet rumours about a device with a device-pixel-ratio
> of 4 appearing in the next 20years or so...
Sheesh, I don't doubt that devices will get more (pixel) dense in the
future. As someone who has to build graphics for these devices, TBTH,
I am not really looking forward to it. Don't get me wrong, I try to
avoid bitmaps wherever possible in my designs these days, it's just
that some things are unavoidable. :D
> MDN is correct (luckily). Too many people just blindly copy-paste without even bothering
thinking.
Heck, I'm glad I asked! Thanks for the tip off.
FWIW, I've updated my examples:
<http://jsbin.com/odipeq/2/>
<https://gist.github.com/3118451>
> BTW, the current 'official' way to write those resolution media-queries would be
> @media screen and (min-resolution: 2dppx) { /*stuff here */ }
> But no browser support this, yet.
Whoa, interesting! Thanks for info and linkage, reading now.
> min-device-pixel-ratio is not officially documented anywhere (Apple
> invented this for Retina devices), it might become official in a
> future css4 media queries module though. I personally find it
> immensely more readable than the 'dppx' one (I had to look up the
> exact spelling of 'dppx' again while writing this).
That's pretty wild! Thanks so much for all the details! I owe you one also! :D
My biggest gripe is the need to account for all the different vendors.
Also, the examples I have been showing you folks, they don't seem very
DRY. For example:
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) { ... }
... is it just me, or does "only screen" feel like overkill? It seems
like every example I've found on the net uses the above syntax for
targeting retina display:
<https://github.com/h5bp/mobile-boilerplate/blob/master/css/style.css#L234-241>
Why not just:
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5)
and (-o-min-device-pixel-ratio: 3/2)
and (min--moz-device-pixel-ratio: 1.5)
and (min-device-pixel-ratio: 1.5) { ... }
... which would make doing something like this:
@media
only screen and (min-width: 990px),
only screen and (-webkit-min-device-pixel-ratio: 1.5)
and (-o-min-device-pixel-ratio: 3/2)
and (-moz-min-device-pixel-ratio: 1.5)
and (min-device-pixel-ratio: 1.5) { ... }
... easier to write and understand.
At least, for me, I find the syntax to be a bit confusing... Maybe if
I did not have to account for all the different vendors, I'd be
singing a different tune here. :D
Sorry, I'm starting to ramble.
Thanks again for the help Philippe, I really appreciate it!
Cheers,
Micky
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
