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

在桌面电脑端，浏览器的分辨率与电脑屏幕的分辨率是一致的。而智能手机的屏幕分辨率往往和手机浏览器分辨率不同，因为手机的屏幕相对来说比较小，如果要显示高清画质，那么它的分辨率就要高。比如说，苹果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开发，最后要封装成应用，那么我们在开发时，要查询的是手机屏幕的分辨率；如果只是开发移动网站，那么我们需要知道的是各手机浏览器的分辨率。

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

 

[html] viewplaincopy

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

 

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

 

[html] viewplaincopy

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. }