移动web开发基础（二）——viewport

　　本文主要研究为何移动web开发须要设置viewport，且通常设置为<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">.

　　首先，须要明白viewport是什么东东。看下图：

　　对于viewport，直接翻译成中文就是视口、视见区、观察区，能够理解为窗口。咱们在移动设备上看到的页面实际上是经过2个viewport渲染以后的样子。首先是layout viewport，它按照设备默认的viewport的宽度来渲染页面（好比ios的默认窗口宽度为980px），咱们在电脑中打开浏览器看到页面时，直接看到了layout viewport。因为不一样设备默认宽度不同，因此不能使用默认的980px，而须要设置width=device-width，按照不一样设备的物理宽度来渲染layout。

　　那么，如今问题来了：怎么才能在移动端看到像PC端那样原汁原味的页面呢？换句话说，怎么在移动端保持页面的排版布局和良好的用户体验呢？

　　因而咱们有了虚拟窗口visual viewport,它把layout viewport按必定的比例缩放，使得页面能保持排版且移动端浏览器不出现横向滚动条。

　　下面咱们来实践一下。

　　首先咱们利用现有的PC端开发经验，写了一个页面以下：

 　　在手机看效果以下：

　　在手机上看起来可不太妙，字体那么小……因而咱们对代码加以修改，告诉手机端浏览器，这个页面要适配哦。因而，看起来就变成了这样：

　　看起来是否是好一点了呢？固然，对于viewport，还有更多能够设置的参数：

　　国内智能机通常都是ios或Android，因此支持经过meta标签来设置viewport，此外，webOS (Palm) 、 Internet Explorer Mobile, Opera Mini 、Opera Mobile也都支持，因此暂时不讨论不支持的状况。

参考：

一、《Hello,移动Web》http://www.imooc.com/video/9567

二、David Calhoun's blog-《The Viewport Metatag(Mobile Web Part1)》http://davidbcalhoun.com/2010/viewport-metatag/