无论是公司项目还是合作项目有时候都需要一些移动端网页开发的任务,比如扫描二维码之后或者内嵌到客户端里面的页面,等等.
本篇文章主要通过调研不同横向分辨率的移动设备的网页解析情况,来给出移动端网页设置宽度的建议.
在给出调研结果之前,如果你对移动端网页开发还不够了解的话,请先阅读”移动端网页开发基础”.
各位都知道手机的横向分辨率多种多样,所以我们在编写代码之前都会加入一句:
<meta name=”viewport” content=”width=device-width”>
这句话的意思是使整个浏览器的宽度等于设备屏幕的宽度,但是做完这句初始化之后,浏览器的宽度真的就是屏幕宽度吗?
其实上面这条语句严格说来仅仅适用于分辨率为320×480的iOS设备,如果你在你的网页里写了这条语句,然后又添加了一个宽度为320px的div,你会发现在iPhone 3Gs上,这个div是100%撑满屏幕的
如果你有一台iPhone4(屏幕宽度为640px),同样载入刚才那个页面会发现这个div同样是撑满整个屏幕的,按照这条meta语句,应该将这个div宽度设为640px才会撑满对不对,这就是iPhone4+特殊的解析机制
iPhone4+在解析网页的时候依旧把自己当作一台横向分辨率为320px的设备
但是在屏幕上显示的时候,会将尺寸扩大两倍,以前320个像素,在屏幕上会自动扩充为640个,这样就省去了根据两种iPhone开发两种尺寸网页的麻烦
这样的话在iPhone上开发移动端网页就非常简单了,但到目前为止我们仅仅解决了一个平台的问题
Android平台怎么办,所以,我又测试了android手机端浏览器解析的情况,由于设备所限,我只测试了宽度为480的moto里程碑2,小米,还有宽度为720的Galaxy Nexus.
结果比较意外,本以为小米等主流宽度为480px的手机的dvice-width是480px,但是当我还是加载刚才那个网页时,320px的div很好的撑满了屏幕,这样看来其实即使宽度为480px的android手机也是按照320px来解析,只是显示上与iPhone4+不同,自动扩大为1.5倍.
然后又测试了Galaxy Nexus,这款手机屏幕宽度是720px,本想也是按照320px来解析,但事实证明不是,经过我的调试,这款手机是根据360px来解析的,正好是720px的一般.
看来,除了屏幕宽度大于640px的手机,只要是低于640px的都可以认为是按照320px来解析网页,给开发带来很大便利.现在720px的手机比较少,所以可以暂时仅仅开发320px宽度的网页.
条件所限,没有测试宽度为540px的android手机,当然android中也有宽度为240px的机型,但是被我忽略掉了.
可以下一个大概的结论:
- 开发移动端网页,非必要情况下不对于页面设置宽度,只需加上margin来灵活适应屏幕
- 但如果确实有一些板块需要设置宽度,设置为300px即可(左右各留10px边距)
- 如果需要兼顾720px的高端机型,需要在css中写入media query来针对不同宽度的屏幕写样式.