针对于桌面浏览器，大家都很清楚viewport是啥，就是去除了工具栏、状态栏、滚动条等所看到的网页区域。针对于iPhone屏幕，也是同样如此，webApp则是我们去除掉浏览器的本身UI后剩下的区域，所以对于本多webApp来说，如果不设法隐藏掉浏览器的UI的情况下，实际上的viewport将不会是标准的320px*480px(或者480px*320px)，而是要减掉Button bar和Top status bar的高度。图1则显示了viewport相关信息。

图1  viewport相关的参数

当然其实真实的情况下是还有URL bar的的影响，所以对于webApp来说，viewport的展示区域是非常有限的，我们必须采取相应的措施来增大viewport的显示区域，比如可以通过javascript来动态的隐藏掉URL的方法。

对于桌面浏览器来说，平日里我们打开的网站宽度基本上都是1000px左右，但是对于手机来说，不可能有这么大的屏幕显示区域，所以当我们通过手机浏览器访问web网页的时候，iPhone会自动的将网页定义为980px的宽度，这个宽度对于大多数的网页来说都是比较适合的。然后浏览器会自动的将网页缩小到屏幕可以容纳的大小。

当然我们在设计开发webApp的时候，更是希望展现出来的效果是那种比较符合用户习惯的。所以我们可以通过viewport属性来自定义控制webApp的宽度以及是否允许缩放等功能。想要添加这个功能，只需要在html的head标签中添加一句简单的meta即可。代码如下：

<meta id=“viewport” name=“viewport”  content=“width=device-width;

initial-scale=1.0;maximum-scale=1.0;user-scalable=no;” / >

下面分别对上面的几个属性做一个简单的介绍，id顾名思义就是定义该标签的标识名，name则是定义该meta为viewport，content里面的内容则是用于自定义告诉浏览器该如何处理该网页，其中width=device-width则是告诉浏览器该网页的宽度则是按照屏幕的宽度来设定，initial-scale=1.0则是告诉浏览器以1比1的方式来显示网页，maximum-scale=1.0则是告诉浏览器该应用被允许放大的最大比例是1.0.对应的它还有一个minimum-scale属性来定义该网页被允许缩小的最小比例。User-scale则是告诉浏览器是否允许用户缩小或者放大该网页。本例设置为“no”，则说明不允许用户使用缩放功能。通过上面的定义，则保证了该网页将会以原来的大小来加载。

通过iPhone来显示应用的时候，实际上并不像我们桌面的浏览器一样，可以有滚动条的，其实是不存在滚动条的，有些朋友可能会认为是不是它隐藏了滚动条，答案是no，其实不是隐藏，而是他压根就不支持滚动条，我们可以通过手指滑动来滚动应用，但是实际上浏览器从一开始就将整个网页全部加载了进来，只是我们拖动的不是页面，而是viewport