第四题：解释一下 viewport

[Ray-56]

属性、值以及常见用法

[GenXiaoLe]

viewport

1. 简介
   中文翻译为“视图”或者“窗口”，表示的是用户网页或者屏幕的可视范围，通常针对PC端和移动端网页会设置不同的属性只进行调整。
2. 属性
   • width：控制viewport的宽度，可以被指定，例如：width = 500px(也可传device-width，即为屏幕宽度)；
   • height：控制viewport的高度，如上；
   • initial-scale：初始缩放比例，即每一次加载时页面缩放的比例，例如：initial-scale = 1.0；
   • maximum-scale：允许用户缩放到的最大缩放比例， 例如：maximum-scale = 1.0；
   • minimum-scale：允许用户缩放到的最小缩放比例，例如：minimum-scale = 1.0；
   • user-scaleable：是否允许用户缩放，传值为“yes” or “no”， 例如：user-scaleable = yes;
3. 其他：
   浏览器和移动端的屏幕宽度并不是1:1的关系，比如：以iPhone6/7/8为例，用浏览器显示移动设备的宽度为375px，但是实际在设备中的真实宽度为750px。这其中涉及到一个要素DPR(device pixel ratio，通常称为设备像素比)，设备像素比(DPR)=物理像素(physical pixel，显示器上最小的物理显示单元)/设备独立像素(density-independent pixel，也称逻辑像素，代表css像素之类可以被程序使用的虚拟像素)，而例子中移动设备的DPR为2，所以真实宽度是浏览器的两倍。

[MMmaXingXing]

viewport 定义

viewport是用户网页的可视区域,中文翻译为视区.通俗理解即设备屏幕上用于显示我们网页的那一部分区域.

属性

viewport 通过meta标签设置 示例如下

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

常见属性有

• width: viewport 值为一个数值 如 600、1200 也可以是一个特殊值 如 device-width指设备的宽度
• height 与width相对应 指定viewport的高度
• initial-scale 初始缩放比例 即当页面第一次 load 缩放的比例 值为数字 可以带小数
• maximum-scale 允许的用户缩放到的最大比例 值为数字 可以带小数
• minimum-scale 允许的用户缩放到的最小比例 值为数字 可以带小数
• user-scalable 是否允许用户手动缩放 值为 yes 或者 no

常见用法

移动端自适应 常设置

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

三个viewport

• layout viewport ———— 布局视窗 大于或等于 浏览器视窗 使用 document.documentElement.clientWidth获取
• visual viewport ———— 视觉视窗 等于浏览器视窗大小 使用 document.documentElement.innerWidth获取
• ideal viewport ———— 理想视窗 完美适配移动设备的viewport,无论在何种密度屏,何种分辨率,不需要缩放和横向滚动条就可以显示所有屏幕内容 并且文字 图片 大小刚好合适