176 - 说说你对viewport的理解？

[bettersong]

视口viewport

viewport指的是视口，他是浏览器或app中webview显示页面的区域。一般来讲PC端的视口指的是浏览器窗口区域，而移动端就有点复杂，它有三个视口：

• layout viewport：布局视口
• visual viewport：视觉视口
• ideal viewport：理想视口

布局视口（layout viewport）

它是由浏览器提出的一种虚拟的布局视口，用来解决页面在手机上显示的问题。这种视口可以通过<meta>标签设置viewport来改变。移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

我们可以通过document.documentElement.clientWidth来获取布局视口大小

视觉视口（visual viewport）

它指的是浏览器的可视区域，也就是我们在移动端设备上能够看到的区域。默认与当前浏览器窗口大小相等，当用户对浏览器进行缩放时，不会改变布局视口的大小，但会改变视觉窗口的大小。

我们可以通过window.innerWidth来获取视觉视口大小。

理想视口（ideal viewport）

理想中的视口。这个概念最早由苹果提出，其他浏览器厂商陆续跟进，目的是解决在布局视口下页面元素过小的问题，显示在理想视口中的页面具有最理想的宽度，用户无需进行缩放。所谓理想视口，即页面绘制区域可以完美适配设备宽度的视口大小，不需要出现滚动条即可正常查看网站的所有内容，且文字图片清晰，如所有iphone的理想视口宽度都为320px，安卓设备的理想视口有320px、360px等等。

当页面缩放比例为100%时，理想视口 = 视觉视口。

我们可以通过screen.width来获取理想视口大小。

meta viewport

对于移动端页面，可以采用<meta>标签来配置视口大小和缩放等。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

• width：该属性被用来控制视窗的宽度，可以将width设置为320这样确切的像素数，也可以设为device-width这样的关键字，表示设备的实际宽度，一般为了自适应布局，普遍的做法是将width设置为device-width。
• height：该属性被用来控制视窗的高度，可以将height设置为640这样确切的像素数，也可以设为device-height这样的关键字，表示设备的实际高度，一般不会设置视窗的高度，这样内容超出的话采用滚动方式浏览。
• initial-scale：该属性用于指定页面的初始缩放比例，可以配置0.0～10的数字，initial-scale=1表示不进行缩放，视窗刚好等于理想视窗，当大于1时表示将视窗进行放大，小于1时表示缩小。这里只表示初始视窗缩放值，用户也可以自己进行缩放，例如双指拖动手势缩放或者双击手势放大。安卓设备上的initial-scale默认值： 无默认值，一定要设置，这个属性才会起作用。在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。
• maximum-scale：该属性表示用户能够手动放大的最大比例，可以配置0.0～10的数字。
• minimum-scale：该属性类似maximum-scale，用来指定页面缩小的最小比例。通常情况下，不会定义该属性的值，页面太小将难以浏览。
• user-scalable：该属性表示是否允许用户手动进行缩放，可配置no或者yes。当配置成no时，用户将不能通过手势操作的方式对页面进行缩放。

这里需要注意的是viewport只对移动端浏览器有效，对PC端浏览器是无效的。

适配与缩放

为了让移动端页面获得更好的显示效果，我们必须让布局视口、视觉视口都尽可能等于理想视口，所以我们一般会设置width=device-width，这就相当于让布局视口等于理想视口；设置initial-scale=1.0，相当于让视觉视口等于理想视口；

上面提到width可以决定布局视口的宽度，实际上它并不是布局视口的唯一决定性因素，设置initial-scale也有肯能影响到布局视口，因为布局视口宽度取的是width和视觉视口宽度的最大值。

例如：若手机的理想视口宽度为400px，设置width=device-width，initial-scale=2，此时视觉视口宽度 = 理想视口宽度 / initial-scale即200px，布局视口取两者最大值即device-width 400px。

若设置width=device-width，initial-scale=0.5，此时视觉视口宽度 = 理想视口宽度 / initial-scale即800px，布局视口取两者最大值即800px。

推荐阅读超详细讲解H5移动端适配