彻底理解 Meta 标签中的 viewport 属性、含义及作用

viewport 属性是什么？有哪些作用？

浏览器的视口是一个在其中查看 Web 内容的窗口区域。这通常与渲染的页面大小不同，在这种情况下，浏览器为用户提供滚动条以滚动和访问所有内容。

简单理解：手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽。在移动设备和其他窄屏设备中，某些内容在比普通屏幕更宽的虚拟窗口或视口中渲染页面，然后缩小渲染的结果，以便可以一次看到所有内容。然后，用户可以通过平移和缩放以查看页面的不同区域。例如，如果移动屏幕的宽度为 640px，则页面可能会使用 980px 的虚拟视口渲染，然后页面将缩小以适应 640px 的空间。
这是因为并非所有页面都针对移动设备进行了优化，并且在以较小的视口宽度渲染时会被截断（或至少看起来很糟糕）。虚拟视口则是一种使非移动设备优化页面在窄屏设备上看起来更好的一个方法。

移动版的 Safari 浏览器最新引进了viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。

viewport 相关属性

1. width
   控制视口的大小。这可以设置为特定像素数（如’width=600’），也可以设置为特殊值device-width，即 100vw，100% 的视口宽度。最小值为 1。最大值为 10000。负值会被忽略。
2. height
   控制视口的大小。这可以设置为特定像素数（如 height=600），也可以设置为特殊值 device-height，即 100vh，100% 的视口高度。最小值为 1。最大值为 10000。负值会被忽略。
3. initial-scale
   控制页面首次加载时显示的缩放倍数。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。
4. minimum-scale
   控制页面允许缩小的倍数。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。
5. maximum-scale
   控制页面允许放大的倍数。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。
6. user-scalable
   控制是否允许页面上的放大和缩小操作。有效值为 0、1、yes 或 no。默认值为 1，与 yes 相同。
7. interactive-widget
   指定交互式 UI 组件（如虚拟键盘）对页面视口的影响。有效值：resizes-visual、resizes-content 或 overlays-content。默认值：resizes-visual。

• 注意：当width和initial-scale同时出现

  <meta name="viewport" content="width=980, initial-scale=1.0">
  

  当二者同时出现且width的值不是device-width时，浏览器会取两个中值最大的那个。（例如 width=980，idea viewport的宽是1024，则浏览器取idea viewport的宽。相反则取width的值）。
  但是以上几种情况都会有极个别的小缺陷，就是某些移动设备的横屏、竖屏不分。于是就有了一种写法。

  <meta name="viewport" content="width=device-width, initial-scale=1.0">