码迷,mamicode.com
首页 > 移动开发 > 详细

webapp开发——‘手机屏幕分辨率’与‘浏览器分辨率’不要混淆

时间:2015-01-10 23:32:20      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:

  关于webApp响应式设计遇到的问题,分享给大家,最近在做一个手机webApp,因为我手机是”米3“,屏幕截图大小是1080宽,所以css样式用@media screen and(min-width:1080px){  …… },来判断屏幕最小宽度是1080px的手机web显示什么样的样式,结果却不能正常显示我所指定的css样式,最后在网上查了一下,发现分辨率的范围不对技术分享

 

css代码如下:

 

    @media screen and (min-width:1080px){  
      ..............................
 }  

        意思是在小宽度为1080px的设备上应用{}里面的样式。这里的width,注意是手机浏览器的分辨率,而不是手机设备的屏幕分辨率。比如苹果4的手机屏幕分辨率是960×640。而其自带的Safari浏览器的分辨率是320*480。米3手机屏幕分辨率是1080宽,浏览器分辨率却是360px宽技术分享

我们可以通过如下代码检测所用的浏览器的分辨率:

 

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

 

手机不同浏览器分辨率分区响应式设计css代码:

 

 

@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

竖屏
width/height 320/356
横屏
width/height 480/208

iphone5

竖屏
width/height 320/444
横屏
width/height 568/208

ipad mini

竖屏
width/height 768/928
横屏
width/height 1024/672

New Pad

竖屏
width/height 768/928
横屏
width/height 1024/672

webapp开发——‘手机屏幕分辨率’与‘浏览器分辨率’不要混淆

标签:

原文地址:http://www.cnblogs.com/kt520/p/4215803.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!