移动设备的快速发展给用户带来了很大的便利。用户使用Android、iPhone和其它移动设备很容易接入互联网。移动设备对网页的性能要求比较高,下面就说说Mobile Web开发的一些心得。
Viewport
当你用iPhone访问一个没有面向移动设备优化过的网站时(最好选取960px宽度的网站),你会发现iPhone上面刚好可以把整个页面显示出来,但是页面被缩小了非常多,字体非常小。这其实是Sarari默认把自己当成980px宽度来处理的,而所有iPhone(竖屏)的真实宽度为320px,事实上几乎所有的移动设备都有类似的情况,iPhone的请参考iPhone 5 Display Size and Web Design Tips。这就牵扯到Viewport的概念了。
Viewport是浏览器的可视区域,也是浏览器的宽度,在PC上面问题比较简单,宽度是多少就多少,但是在移动设备上,浏览器尝试去把整个页面都显示出来,所以就会Viewport值不准确的情况,例如上面提到的Safari从iPhone那里获取到宽度是980px(浏览器只能从系统那里获取宽度),所以我们要做第一件事就是要浏览器用真实的宽度去解析页面,代码如下:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
"width=device-width"表示浏览器用它自己真实的宽度,如iPhone上面就是320px&