viewport meta 标记

视口

视口：指用户在浏览器中看到页面内容的区域。视口的大小取决于设备的屏幕大小和分辨率，以及用户是否使用了缩放功能。

分为三个：

布局视口：是浏览器中用来渲染页面的区域大小，通常比屏幕宽度要大，以适应页面的内容。
视觉视口：是用户在浏览器中看到的页面内容区域，可以通过缩放来改变大小。
理想视口：设备的物理分辨率下的视口大小，通常等于设备的屏幕宽度。在移动端开发中，通常会通过设置<meta>标签来控制理想视口的大小。

视口基础知识

针对移动页面一般都有下面这行代码

<meta name='viewport' content='width=device-width,initial-scale=1'/>

viewport是meta标签的一个属性，它有六个属性

width:设置视口的宽度，可以是固定的像素值，如（width=600），也可以设置特殊值device-width，即100vw，100%的视口宽度。最小值为1.最大值为10000，负值会被忽略。
height:设置视口的高度，一般不设置，因为视口会自动调节高度，也可以使用device-height，即100vh，100%的视口高度。最小值最大值同上。
initial-scale:控制页面首次加载时显示的缩放倍数。最小值为0.1，最大值为10.默认值为1.负值会被忽略。
minimum-scale:控制页面允许缩小的倍数。最小为0.1，最大为10。默认为1，负值会被忽略。
maximum-scale:控制页面允许的放大的倍数。设置一个低于3的值将不具备无障碍访问性。最小值为0.1，最大值为10。默认为1，负值会被忽略。
user-scalable:控制是否允许页面上的放大和缩小操作。有效值为0、1、yes、no。默认值为1，与yes相同。将值设置为0将潍坊Web内容无障碍指南
interactive-widget:指定交互式UI组件（如虚拟键盘）对页面视口的影响。有效值：resizes-visual、resizes-content或overlays-content。默认值：resizes-visual。

屏幕密度

移动端和pc端不同，屏幕小但是分辨率却高达1920-1080像素（约等于400dpi（每英寸面积内的像素点数））。所以，在移动端，1px并不等于1个物理像素，而是等于0.25个物理像素。

视口宽度和屏幕宽度

<meta name='viewport' content='width=500,initial-scale=1'/>

页面可以将其视口设置为特定尺寸，例如"width=320,initial-scale=1"的定义可以用来精确地适应纵向模式下的小型手机显示屏。当浏览器以较大的尺寸渲染页面时，这可能导致问题。为了解决这个问题，如果有必要，浏览器会扩大视口宽度，以便按要求的比例填充屏幕。上面的代码，视口宽度为500px，但是屏幕宽度为320px，浏览器会扩大视口宽度，以便适应屏幕。