WebApp Development —————— Phone screen resolution and browser resolution do not 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 CSS style with @mediascreens and (min- width:1080px) {...}, to determine the minimum screen width is 1080px mobile phone web display what kind of style, the result does not display the CSS style I specified, and 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) {...}..................}