WebApp Development--' phone screen resolution ' and ' browser resolution ' Don't confuse

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