移动端中的视口

---

前言

    在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。而移动端则较为复杂，它涉及到三个视口：布局视口、视觉视口和理想视口。

三种视口

    移动端浏览器通常宽度是 240px~640px，而大多数为 PC 端设计的网站宽度至少为 800px，如果仍以浏览器窗口作为视口的话，网站内容在手机上看起来会非常窄。

因此，引入了布局视口、视觉视口和理想视口三个概念，使得移动端中的视口与浏览器宽度不再相关联。

1.布局视口

一般移动设备的浏览器都默认设置了一个 viewport 元标签，定义一个虚拟的布局视口（layout viewport），用于解决早期的页面在手机上显示的问题。iOS, Android 基本都将这个视口分辨率设置为 980px，所以 PC 上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

布局视口的宽度/高度可以通过 document.documentElement.clientWidth / Height 获取。

如图默认的布局视口宽度为 980px如果要显式设置布局视口，可以使用 HTML 中的 meta 标签：

<meta name="viewport" content="width=600">

2.视觉视口

视觉视口是用户当前看到的区域，用户可以通过缩放操作视觉视口，同时不会影响布局视口。

视觉视口和缩放比例的关系为：

当前缩放值 = 理想视口宽度  / 视觉视口宽度

3.理想视口

布局视口的默认宽度并不是一个理想的宽度，于是 Apple 和其他浏览器厂商引入了理想视口的概念，它对设备而言是最理想的布局视口尺寸。显示在理想视口中的网站具有最理想的宽度，用户无需进行缩放。

<meta name="viewport" content="width=device-width">

通过以上代码可以使布局视口与理想视口的宽度一致,device-width表示设备的宽度

关于meta 标签一些视口属性的设置

属性	描述
width	视口宽度 默认是980px
initial-scale	初始化缩放 设置为 1 等于手机屏幕宽度
user-scale	是否允许用户进行缩放 0/1 表示true和false 一般是设置为0 也可以 no和yes
maximum-scale	设置视口的最大缩放
minimum-scale	设置视口的最小缩放

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