WebApp Development-Mobile screen resolution with built-in browser resolution

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 @media screens and (min-width:1080px) {... }, to determine the minimum screen width is 1080px mobile phone web display what 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:

?

123	@mediascreen 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:

?

1234	<script type=‘text/javascript‘>document.write("浏览器分辨率是"+document.documentElement.clientWidth+"*"+document.documentElement.clientHeight );document.write("屏幕分辨率是"+window.screen.width+"*"+window.screen.height);</script>

mobile phone Different browser resolution partition responsive design CSS code:?

123456789

@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) { }