I have android program that use view web server local HTML. But HTML don't work well in android device emulator. I use these CSS codes but it doesn't work.
@media screen and (-webkit-device-pixel-ratio: 1.5) {}
@media screen and (-webkit-device-pixel-ratio: 0.75) {}
And these below CSS codes, it work for browsers but it doesn't work well for android emulator.
@media screen and (min-width:960px) and (max-width:1200px){}
@media screen and (min-width:720px) and (max-width:959px) {}
@media screen and (min-width:640px) and (max-width:719px) {}
@media screen and (min-width:480px) and (max-width:639px) {}
@media screen and (min-width:320px) and (max-width:479px) {}
Could someone tell me the CSS codes that work for phones and tablet, landscape and portrait. Thanks for answer...
我不能完全确定我了解您的问题,但是如果您遇到问题,我认为您是:尝试以下操作:
<meta name="viewport" content="width=device-width" />
Your second version should work seamlessly:
@media screen and (min-width:960px) and (max-width:1200px){}
@media screen and (min-width:720px) and (max-width:959px) {}
@media screen and (min-width:640px) and (max-width:719px) {}
@media screen and (min-width:480px) and (max-width:639px) {}
@media screen and (min-width:320px) and (max-width:479px) {}
Because the first version relies on device pixel ratio not upon the actual screen sizes. Did you insert the viewport meta tag in the head
?
Try Adding this in head section.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
and in css file write media query as follows.
@media only screen and (min-width: 600px){
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.