Viewport 是移动前端开发中一个非常重要的概念，它是指用户在浏览器可视区域内看到的网页部分。移动设备因为屏幕尺寸的限制，需要通过 viewport 来适配不同的设备大小。
什么是Viewport？
Viewport 可以分为两个概念：布局视口（layout viewport）和视觉视口（visual viewport）。
布局视口
布局视口就是网页的初始大小，即网页默认展示的大小。在移动设备上，因为屏幕尺寸小于电脑屏幕，所以默认情况下布局视口会比较小。
视觉视口
视觉视口指的是当前可见区域的大小，也就是浏览器显示的活动区域大小。这个大小是由设备自身的屏幕大小决定的。
Viewport 的设置
在移动端开发中，我们通常使用 meta 标签来设置 viewport，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
其中 width=device-width 表示将布局视口设置为设备宽度。如果不设置这个属性，那么布局视口大小就会按照默认的值来设置，这可能导致页面在移动设备上展示的效果不理想。
initial-scale=1.0 表示初始缩放比例为 1，也就是不进行缩放。如果希望页面刚加载时不进行自动缩放，那么可以设置这个属性。
除了上述两个属性之外，还有一些其它的属性可以用来控制 viewport 的行为，比如 minimum-scale、maximum-scale、user-scalable 等等。
Viewport 的实际应用
在实际开发中，我们通常会用到下面这些 viewport 的设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这个设置可以确保页面在移动设备上展示的效果更为稳定，同时也防止用户进行不必要的缩放操作。但需要注意的是，如果网页内容太大，用户可能需要缩放来查看完整内容。
结论
Viewport 是移动前端开发中非常重要的一个概念，对于适配不同设备尺寸和提升用户体验都非常重要。在实际开发中，需要根据具体情况灵活设置 viewport，以达到最佳的展示效果。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- ------------------ ------------------ ------------------
--------------- ----------
-------
---- -
------- --
-------- --
-
---- -
------ -----
------- ------
----------------- -----
----------- -------
---------- -----
-
--------
-------
------
---- ------------------ ------------
-------
-------以上示例代码中，<meta> 标签设置了 viewport 的相关属性，.box 类是用来展示一个红色的 div 块，高度为当前视觉视口的高度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14461