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

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -