浏览器视口viewport

视觉视口

1. 即用户看到的区域，视觉视口宽度pc端为浏览器宽度，移动端为手机屏幕宽度。
2. 放大页面时，视觉视口将缩小，单个css像素将占据更多的物理像素。

布局视口

1. pc端布局视口宽度为浏览器页面部分的宽度。
2. 移动端可通过viewport的content设置布局视口宽度，content小于屏幕宽度时被设置为屏幕宽度，不受缩放影响。
3. 可通过document.documentElement.clientWidth获取。

理想视口

1. 显示在理想视口中的网站具有最理想的宽度，用户无需进行缩放。
2. 由于移动端手机分辨率宽度都是在375左右，基于375宽度的设计稿设计页面可以简化计算，因此理想视口的值其实就是屏幕分辨率的值，它对应的像素叫做设备逻辑像素（device independent pixel, dip）。dip 和设备的物理像素无关，一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。如果用户没有进行缩放，那么一个 CSS 像素就等于一个 dip。
3. 用下面的方法可以使布局视口与理想视口的宽度一致：

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

实际上，这就是响应式布局的基础。

pc端

在页面内容超过浏览器宽度时，会显示滚动条，可滚动显示页面，不会进行缩放（viewport 标签只对移动端浏览器有效）。

移动端

不设置viewport的initial-scale时，浏览器会自动缩放页面，使页面尽可能在水平方向显示完整。

总结

总的来说，移动端响应式布局，就是设置布局视口等于理想视口，而理想视口宽高等于手机屏幕分辨率，也就将布局视口宽度设置为分辨率宽度(device-width)。同时，当内容宽度大于布局视口宽度时，移动端会自动放大，因此还需要设置缩放比例为1并使其不自动缩放。