什么是viewport？

什么是viewport？

Viewprot是用户网页的可视区域。

Viewprot翻译为中文可以叫做“视区”。

手机浏览器是把页面房子啊一个虚拟的“窗口（viewport）”比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分；

个人理解部分：

浏览器就想一个盒子一样，pc的浏览器和手机浏览器屏幕是不同尺寸大小。同样一套尺寸网页在pc上可以正常浏览，如果没有viewport定义浏览器的尺寸，想pc尺寸一样在手机浏览器上显示，布局可能就乱掉，或者先尺寸比例非常的不协调。

比如，同样是16号大小的字体，在pc的浏览器中显示刚刚好，但是手机浏览器当中就会像芝麻大小。

关于PPK三个viewport的理论

1. layout viewport（布局视口）

Layout viewportd 宽度大于浏览器的可视区域，就好比你的电脑屏幕宽度是1024，但是你网页的宽度是1400.那么1400就是layout viewport的宽度。

宽度获取可以通过document.documentElement.clientWidth获取。

1. Visual viewport（视觉视口）

Visual Viewport 的宽度就相当于你客户端的屏幕大小。

宽度获取可以通过 window.innerWidth获取。

1. Ideal viewport（理想视口）

Ideal viewport就是我们通常说的屏幕分辨率。

Dip（设备逻辑像素）跟设备的硬件像素无关的。一个dip在任意像素密度的设备屏幕上占据相同的空间。

比如说屏幕显示器硬件像素为2880*1800当你设置屏幕分辨率为1920*1200的时候，ideal viewport（理想视口）的宽度值视1920像素。那么dip的宽度值就视1920.设备像素比是1.5（2880/1920）.

设备的逻辑像素宽度和物理像素宽度（像素分辨率）的关系满足如下公式：

逻辑像素宽度*倍率=物理像素宽度

使用viewport元标签控制布局

<mate name='viewport' content='width=device-width;initial-scale=1.0;maximum-scale=1;user-scalable=no'>

属性介绍

属性名	取值	描述
Width	正整数或device-width	定义视口的宽度，单位为像素
Height	正整数或device-height	定义视口的高度，单位为像素，一般不用
Initial-scale	[0.0-10.0]	定义初始缩放值
Minimum-scale	[0.0-10.0]	定义缩小最小比例，它必须小于或等于maximum-scale
Maximum-scale	[0.0-10.0]	定义放大最大比例，它必须大于等于minimum-scale
User-scalable	Yes/no	定义是否允许手动缩放，默认值yes

注：device-width这一特殊值，一般为了自适应布局，普遍的做法是将width设置为device-width.也就是将layout viewport的宽度设置ideal viewport的宽度

文章借鉴：

移动前端开发之viewport的深入理解

说说移动前端中 viewport （视口）