现在手机分辨率越来越高，1080*1920 都是普通分辨率了，但这还真挺高的，似乎我们做手机版网页可以像做电脑版网页一样做了。
其实不行，因为手机虽然分辨率高，但由于屏幕小，其浏览器分辨率却很小，iPhone 6 为 Galaxy S5 为 360*640、375*667、iPhone 6 Plus 为 414*736，也就是说手机浏览器分辨率不等同于手机屏幕分辨率，这点不同于电脑。
<script type="text/javascript">
<!--
document.write("浏览器分辨率是：" + document.documentElement.clientWidth + "*" + document.documentElement.clientHeight);
document.write("屏幕分辨率是：" + window.screen.width + "*" + window.screen.height);
//-->
</script>那么如何开发好手机版网页，就有几个很好的建议：
一、指定 viewport 宽度，且限定缩放
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no" />
如上，就使 100% 这个尺寸等效于浏览器分辨率，且限定了缩放。
二、采用百分比布局
电脑版中我们可这样写：.leftCol { width:300px; } .rightCol { width:700px; }
但手机版中建议这样写：.leftCol { width:30%; } .rightCol { width:70%; }
三、针对不同分辨率写不同 CSS
@media screen and (max-width : 400px)
{
/*手机浏览器分辨率 <= 400px 的*/
}
@media screen and (max-width : 320px)
{
/*手机浏览器分辨率 <= 320px 的*/
}注意：
由于并不是用的 width <= 判断，而是用 max-width : 判断。如果有更多条件，也可加更多 and。
and 后面要有空格。
扩展：
min-width、max-width 分别表示手机浏览器的最小宽度、最大宽度。
min-device-width、max-device-width 分别表示手机屏幕的最小宽度、最大宽度。
还有一种写法，是在引用环节，利用 link 的 media 属性：
<link rel="stylesheet" type="text/css" media="(max-width:750px)" href="small.css"> <link rel="stylesheet" type="text/css" media="(min-width:750px)" href="big.css">
四、手机浏览器采用的标准相对较为统一，且支持 HTML5、CSS3，所以各浏览器之间兼容性要好得多、开发起来也要轻松得多。
