meta

viewport

viewport也称为视口,主要是用在移动端展示的场景中。

三个基础的视口概念：

- 布局视口(layout viewport)

默认情况下，在移动端的布局视口宽度为 980px(某些设备可能为 1024px)，所以一个 pc 端的页面，想要在移动端展示，移动端的浏览器会将整个页面缩小到 980px 的宽度。

很明显，当元素宽度正好为 980px，则撑满页面宽度，大于 980px 则出现横向滚动条, 这个时候布局视口宽度就是980px,可以通过document.documentElement.clientWidth来获取。

- 理想视口(ideal viewport)

理想视口和设备有关,一般为移动端物理像素/DPR 作为 css 的逻辑像素，可以通过window.screen.width来获取,比如 iphone 13promax 固定为430px。

- 视觉视口(visual viewport)

主要是用户通过手机屏幕看到的网页的区域,默认情况下也是 980px,可以通过window.innerWidth来获取,这个时候页面是进行缩放的，具体的缩放比例为理想视口/视觉视口。

meta viewport

我们肯定不希望 980px 宽度的元素在移动端设备（比如 430px）进行缩放展示。<meta>元素可以通过viewport来设置视口和缩放，从而让页面在移动端有更好的展示效果,其实就是让布局视口和视觉视口都等于理想视口。

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

1) width=device-width

布局视口 === 理想视口

2) initial-scale=1(initial-scale=理想视口/视觉视口)

视觉视口 === 理想视口

其中缩放也会影响布局视口，一般为 width 和视觉视口宽度的最大值