建站常识

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

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

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

而在做移动应用时，我们得这样写样式：

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

min-width和max-width：表示手机浏览器的最小宽度和最大宽度

min-device-width和max-device-width：表示手机屏幕显示的最小宽度和最大宽度

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

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

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