About WebApp response design encountered problems, share to everyone, recently in a mobile phone webapp, because my phone is "M 3", the screen size is 1080 wide, so the CSS style with @media screens and (min-width:1080px) {...}, To determine the minimum screen width is 1080px mobile phone web display what kind of style, the result is not normal display I specified CSS style, finally looked on the internet, found that the range of resolution is not correct.
The CSS code is as follows:
@media screen and (min-width:1080px) { .............. ........ }
It means to apply the style of {} on a device with a small width of 1080px. The width here, note is the resolution of the phone browser, not the screen resolution of the mobile device . For example, Apple's 4 phone screen resolution is 960x640. The resolution of its own Safari browser is 320*480. M 3 Phone screen resolution is 1080 wide, the browser resolution is 360px wide.
We can detect the resolution of the browser using the following code:
<script type= ' text/javascript ' >document.write ("Browser resolution is" +document.documentelement.clientwidth+ "*" + Document.documentElement.clientHeight);d ocument.write ("screen resolution is" +window.screen.width+ "*" +window.screen.height); </script>
mobile phone Different browser resolution partition responsive design CSS code:
@media screen and (min-width:320px) {... ...}.................... @media screen and (min-width:241px) and (max-width:320px) {...}...................} @media screen and (min-width:1px) and (max-width:240px) {...}..................}
ipod Touch 4/iphone4/iphone4s
Vertical screen
Width/height 320/356
Horizontal screen
Width/height 480/208
Iphone5
Vertical screen
Width/height 320/444
Horizontal screen
Width/height 568/208
ipad Mini
Vertical screen
Width/height 768/928
Horizontal screen
Width/height 1024/672
New Pad
Vertical screen
Width/height 768/928
Horizontal screen
Width/height 1024/672
WebApp Development--' phone screen resolution ' and ' browser resolution ' Don't confuse