标签:style http java color os strong 2014 问题
关于webApp响应式设计遇到的问题,分享给大家,最近在做一个手机webApp,因为我手机是”米3“,屏幕截图大小是1080宽,所以css样式用 @media screen and(min-width:1080px){ ...... },来判断屏幕最小宽度是1080px的手机web显示什么样的样式,结果却不能正常显示我所指定的css样式,最后在网上查了一下,发现分辨率的范围不 对。
css代码如下:
1
2
3
|
@media screen and (min-width:1080px){ .............................. } |
意思是在小宽度为1080px的设备上应用{}里面的样式。这里的width,注意是手机浏览器的分辨率,而不是手机设备的屏幕分辨率。比如苹果4的手机屏幕分辨率是960x640。而其自带的Safari浏览器的分辨率是320*480。米3手机屏幕分辨率是1080宽,浏览器分辨率却是360px宽。
我们可以通过如下代码检测所用的浏览器的分辨率:
1
2
3
4
|
<script type= ‘text/javascript‘ > document.write( "浏览器分辨率是" +document.documentElement.clientWidth+ "*" +document.documentElement.clientHeight ); document.write( "屏幕分辨率是" +window.screen.width+ "*" +window.screen.height); </script> |
1
2
3
4
5
6
7
8
9
|
@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){ .................................. } |
webapp开发--手机屏幕分辨率同内置浏览器分辨率,布布扣,bubuko.com
标签:style http java color os strong 2014 问题
原文地址:http://www.cnblogs.com/ilovejiahuigege/p/3875496.html