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