HTML5移动开发:手机屏幕分辨率和手机浏览器分辨率

2015年03月18日 javascript 暂无评论 阅读 113 views 次

在桌面电脑端,浏览器的分辨率与电脑屏幕的分辨率是一致的。而智能手机的屏幕分辨率往往和手机浏览器分辨率不同,因为手机的屏幕相对来说比较小,如果要显示高清画质,那么它的分辨率就要高。比如说,苹果iPhone4手机的屏幕分辨率是640*960,而其自带的Safari浏览器的分辨率却只有320*480。所以,我们在用HTML5+CSS3开发移动网站和移动应用时,就要注意了。

假设,我们现在要针对苹果iPhone4开发一个移动网站以及一个移动应用,在做移动网站时,我们这样写样式:

1 @media screen and (min-width:320px) and (max-width:480px){
2  
3 }

而在做移动应用时,我们得这样写样式:

1 @media screen and (min-device-width:640px) and (max-device-width:960px){
2  
3 }

min-width和max-width:表示手机浏览器的最小宽度和最大宽度
min-device-width和max-device-width:表示手机屏幕显示的最小宽度和最大宽度

也就是说,如果我们用HTML5开发,最后要封装成应用,那么我们在开发时,要查询的是手机屏幕的分辨率;如果只是开发移动网站,那么我们需要知道的是各手机浏览器的分辨率。

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

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

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

  1. @media screen and (min-width: 320px){  
  2. ....................................  
  3.  
  4. @media screen and (min-width: 241px) and (max-width: 320px){  
  5. ...................................  
  6.  
  7. @media screen and (min-width: 1px) and (max-width: 240px){  
  8. ..................................  
  9. }

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.  

用户登录

分享到: