最近项目中需要开发内嵌的H5页面，viewport不是很熟悉，故来翻译一下此篇文件加深理解

原文

配置viewport

IOS上的safari使用一种缩放的工作模式来展示pc端的网页，如果默认的设置对你的网页展示不友好，推荐你改变veiwport默认配置，开发IOS上使用的网页，你需要设置viewport，在html文档中，增加一行标记来配置viewport，但是要理解viewport怎么对你的网页展示还是很容易混淆，在配置viewport之前，你需要深度理解一下ios上的viewport

viewport是什么

在PC和IOS上浏览器的viewport有一些不太一样

在IOS上的safari，没有窗口、滚动条、调整窗口的按钮见图3-1，用户轻弹手指来操作，用户通过双击、双手捏开来放大，双手捏紧来缩小，这些收拾在pc端是不支持的，由于用户有不同的操作方式来操作pc端和移动端的页面，所以viewport在pc端和移动端表现不一样，由于不一样的表现，所以相同的css和html也有不一样的表现。

图3-1

桌面的safari viewport

桌面浏览器的viewport是网页的可视区域如图3-2，如果页面的宽度大于viewport，用户可以通过缩放按钮来缩放浏览器的viewport大小，用户也可以控制滚动条看到更多的页面内容，当viewport变化，safari 也许会重新布局，比如会扩充压缩宽度是适配viewport，如果页面宽度小于viewport，那么剩余位置会填充剩余的空白

3-2

IOS上的viewport

在IOS上，viewport取决于内容如何布局、文本在页面上的换行情况，viewport可能大于或小于可视区域，当用户在IOS上平移网页时灰色条形显示在屏幕的右侧和底部，作为视觉反馈，向用户显示与视口相比可见区域的大小，用户可以使用双击轻点、捏开、捏紧手势来改变viewport的缩放比例，唯一的例外是，当用户从纵向更改为横向时，在某些情况下，iOS上的Safari可能会调整视口的宽度和高度，并因此更改网页布局

默认viewport配置

初始化设置宽度和缩放比例是为了让大部分网页可以很好的展示，如果3-3，默认的宽度是980px，当然这个默认值，可能不能很好的适配你的网页，特别是如果您要针对特定​​设备定制网站，例如3-3右边的图，网页展示的太窄了，这样的话，你可以修改默认的viewport

3-3

viewport meta tag

使用viewport meta标签来提高网页的展示，你可以设置viewport来这是默认的宽度和初始化缩放值，例如，如果你的网页比980更窄，你应该设置宽度为你网页内容的宽度，如果你专门为iphone ipod开发的web程序，你应该设置为设备的宽度

由于iOS在具有不同屏幕分辨率的设备上运行，因此在引用设备尺寸时，应使用常量而不是数字值。使用device-width作为设备的宽度，并使用device-height作为纵向的高度

你不需要设置所有的viewport属性，如果仅设置了一部分属性，然后iOS上的Safari会推断其他值，例如如果你设置了默认的初始缩放为1.0，浏览器会推测横向宽度为deivce-width，如果是纵向是，deivce-height为页面宽度，因此，如果你向设置width为980px初始化scale为1.0，那你需要设置这两个属性

设置宽度为device-width

设置默认缩放

改变viewport的宽度和高度

在IOS上，你有一个非常重要的任务就是去设置viewport的宽度去适配你的web程序内容宽度，这样来确保你的网页在ios上看起来是正常的

如果你的网站必须要在980px下才能很好的适配，如果IOS上的safari不能设置980的viewport，只能左上角灰色的小块能够展示出来，这个默认就不能展示页面的所有内容，这样的话，你就需要设置meta去适配supported

3-4

如果页面的宽度小于默认的viewport宽度，那么页面展示将如图3-5左边的图片，现在设置viewport的宽度为页面的宽度，此刻展示如图3-5右边，为了实现右边效果，你需要在你的html文件中的

增加如下代码

3-5

iphone、ipod触屏设备上，web程序开发中，非常重要的是改变viewport的width为设备的宽度，图3-6展示了，设置viewport为divice-width是的效果

3-6

浏览器是怎么设置初始化的宽度 高度 和初始化缩放

如果你设置了一些属性，这时浏览器会自动计算其他属性的值，以适配网页的展示，例如，如果只设置了初始化的缩放值，这时候width和height会自动计算，相似的 如果只设置了width，那么heigh和scale会自动计算，如果你设置的值没有生效，那么需要设置更多的值。

由于浏览器可以自动推算宽度、高度、缩放比例，那么用户旋转手机方向时，viewport的视口发生变化，例如当用户通过旋转设备从纵向更改为横向时，视区宽度可能会扩大，仅有这种用户行为可能引起viewport的重新计算，改变在浏览器的布局。

在iOS上，Safari的目标是当网页完全缩小时，保持与任一方向上可见区域的比率相等的比率，使其适合可见区域，这最好通过独立设置视区属性来说明，然后观察其他viewport属性对viewport影响，下面一系列的例子来展示，相同的web 内容和不同viewport的设置相同影响。

图3-7展示采用默认宽度980px和没有默认缩放行为的 viewport，来一个web页面的展示

3-7

图3-8 设置了initial scale为1.0展示相同的web页面，浏览器去推算了width和height去适配了网页可视区域展示，这个width被推算成了横向时device-width，纵向时device-height

3-8

相似的，如果你近设置了viewport的宽度，这个height和initial scale也会推算出来，图3-9，展示phone设置viewport width为320时，纵向展示跟图3-8一致，横向展示的时候width等于device-width，它改变了初始的比例，当用户改变到横向时，它有放大的效果

3-9

图3-10，在设置viewport width一个小于可视区域的宽度200px，展示相同的页面，网页的viewport被设置了200px时，推断高度和影响页面第一次渲染的的initical scale

3-10

最后，图3-11设置了width和initical scale值来展示相同页面，浏览器保持可视区域两个方向上相同比率的自动推算了高度，因此如果width设置为980，initical width 为1.0 那么浏览器会推算出 手机横置时为1091，纵置时为425

3-11

minimum-scale和maximum-scale属性也会被影响，当手机改变方式时，这两个属性的范围[0, 10.0], 默认的minimum-scale 0.25 maximum-scale 5.0

web程序设置viewport

如果你准备开发ios下的web应用程序，推荐设置你网页的宽度为ios上的可视化宽度，设置为device-width，因此initical scale 为1.0，让用户改变手机方向时，viewport不会重新计算

如果你不改变浏览器的viewport 属性，你的网页会展示在页面的左上角如图3-12，在开发web应用程序时，设置viewport的width 应该是你的首要任务，不需要用户通过缩放来使用你的程序

3-12

如果设置来device-width，那么你的网页展示如图3-13所有，用户可以向下滑动来看余下的网页，如果比可视区域更高

3-13

你也许不想用户去缩放web程序，在这种情况下，可以关闭用户的缩放属性