关于前端:了解-viewport-meta-tag

什么是 viewport

viewport, 中文也叫“视口”。在浏览器领域里，它代表的是在浏览器中，能够看到的网页内容。viewport 外的内容在被滚动进来前都是不可见的。

进一步细分 viewport，以后可见的局部叫做 visual viewport（可视视口）。visual viewport 可能会比 layout viewport（布局视口）更小，因为当用户放大浏览器缩放比例时，布局视口不变，而可视视口变小了。这导致用户须要横向滑动滚动条能力看到残缺的信息。
咱们能够用维基百科的首页举例，大家也能够本人点进去缩放浏览器感受一下:

1. 失常状况下，visual viewport = layout viewport。
2. 当咱们放大浏览器比例时，visual viewport < layout viewport。这时候须要滑动上面的滚动条能力看到残缺的 layout viewport。
   

属性

为了满足 visual viewport = layout viewport 的现实状况，就须要通过 meta 标签来配置 viewport 的不同属性来设计网页。
个别咱们用 HTML5 模板生成一个 html 文件时，viewport 会初始化出上面这些属性：
<meta name="viewport" content="width=device-width, initial-scale=1">

1. content="width=device-width的意思是让 layout viewport 的宽度等于设施宽度。
2. initial-scale=1的意思是容许用户对页面进行缩放。

viewport 的 6 个属性

1. width: 设置布局窗口的宽度。下面的例子里，咱们将其设置为 device-width。同时，它也能够设置为指定的数字，width=960 意思是宽度设置为960px。
2. initial-scale: 设置页面的第一次加载时候的缩放和布局窗口的宽度。个别默认值是 1。
3. minimum-scale: 设置最小缩放级别(即用户能够放大多少)。这就剥夺了用户的控制权，不举荐。
4. maximum-scale: 设置最大缩放级别(即用户能够放大多少)。同样，不倡议这样做。
5. user-scalable: 当设置为 no 时，将阻止用户缩，不举荐。
6. height: 应该设置布局 viewport 的高度。任何中央都不反对 …. 所以不确定是否包含在内。

参考文章

• Using the viewport meta tag to control layout on mobile browsers
• A tale of two viewports — part two
• Viewport Meta Element