视口

布局视口 layout viewport

移动端的浏览器都默认设置有一个布局视口，用于解决早期的PC端页面在手机上显示的问题。

移动端基本都将这个视口分辨率设置为 980px，可以将PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

视觉视口 visual viewport

布局视口在手机上保持原始网页大小，当前屏幕大小显示不全只能看到部分，可以通过滑动缩放浏览网页其他部分。

理想视口 ideal viewport

为了使网站在移动端有最理想的浏览和阅读宽度而设定理想视口

需要手动添写meta视口标签通知浏览器操作

meta标签

作用：使视口宽度和设备保持一致

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, 
                               maximum-scale=1, user-scalable=0, viewport-fit=cover">

属性	说明
width	设置视口的宽度，常用设置device-width使视口宽度和设备保持一致
initial-scale	初始缩放比（倍数）
minimum-scale	最小缩放比（倍数）
maximum-scale	最大缩放比（倍数）
user-scalable	是否允许用户缩放，yes 或 no（1 或 0）
viewport-fit	cover 设置刘海屏横屏时两端留白