css3 - Combining max-width and min-device-pixel-ratio -
css3 - Combining max-width and min-device-pixel-ratio -
i've been asked create different responsive layouts tablets, depending on if high pixel density displays or not.
this code, target iphone 5s in landscape, doesn't seem work. possible?
@media screen ( min-width: 568px) , (-webkit-min-device-pixel-ratio: 1.25), screen ( min-width: 568px) , ( min--moz-device-pixel-ratio: 1.25), screen ( min-width: 568px) , ( -o-min-device-pixel-ratio: 1.25/1), screen ( min-width: 568px) , ( min-device-pixel-ratio: 1.25), screen ( min-width: 568px) , ( min-resolution: 200dpi), screen ( min-width: 568px) , ( min-resolution: 1.25dppx) { body { background-color: maroon; } }
by nesting min-width within queries dpi seems working (i haven't tested on big arsenal of devices). i've never heard of beingness done, safe do?
@media screen , (-webkit-min-device-pixel-ratio: 1.25), screen , ( min--moz-device-pixel-ratio: 1.25), screen , ( -o-min-device-pixel-ratio: 1.25/1), screen , ( min-device-pixel-ratio: 1.25), screen , ( min-resolution: 200dpi), screen , ( min-resolution: 1.25dppx) { @media screen , ( min-width: 568px) { body { background-color: maroon; } } }
your media query missing and
after only screen
@media screen , ( min-width: 568px)
http://jsfiddle.net/l2dhy/
checked on mac book pro on safari has pixel ratio > 1. note, have and
on sec block media query after only screen
css3 responsive-design media-queries
Comments
Post a Comment