Iphone: media css code does not work -
i have @media setup
<head> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> css: @media screen , (min-width: 769px) { /* styles here */ } @media screen , (min-device-width: 481px) , (max-device-width: 768px) { /* styles here */ } @media screen , (max-device-width: 480px) { /* styles here */ }
with setup in works view on iphone not work in browser. it's irritating highly appreciated. because have device in meta , maybe have (max-width:480px) instead?
your question unclear if clarify, yo mean not work in browser? not work in browser?
this queries mean me:
@media screen , (min-width: 769px) {}
this says modern mobile device (older mobile devices don't fall under screen category newer iphones do) or desktop device screen 769 pixels wide or larger apply this. (desktop) abbreviate @media (min-width:769px) , achieve same result.
note iphones fall under 'screen' category base on current orientation. portrait , landscape must treated separately.
@media screen , (min-device-width: 481px) , (max-device-width: 768px) { }
for device minimum screen resolution of 481 pixels wide no more 768 pixels wide, this..
@media screen , (max-device-width: 480px) {
for modern devices maximum screen resolution of 480px this..
none of media queries relate iphones because using max-device-width equivalent devices resolution , iphones resolution far greater 480 or 768. think around 1280 (i'd have up). easier fix use max-width or combine them:
@media screen , (max-device-width:768px), (max-width:768px) {}
further reading:
Comments
Post a Comment