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] view plaincopy





<</span>script type='text/javascript'>

document.write("浏览器分辨率是"+document.documentElement.clientWidth+"*"+document.documentElement.clientHeight );

document.write("屏幕分辨率是"+window.screen.width+"*"+window.screen.height);

</</span>script>

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

[html] view plaincopy





@mediascreen and (min-width: 320px){

....................................

}

@mediascreen and (min-width: 241px) and (max-width: 320px){

...................................

}

@mediascreen and (min-width: 1px) and (max-width: 240px){

..................................

}