移动Web开发实践

移动设备的快速发展给用户带来了很大的便利。用户使用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&