移动端的视口设置

视口的设置

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

以上代码常见于移动端设置，他的作用是使网页的宽度自动适应手机屏幕的宽度。

下面对每个属性的详细说明：

属性名	取值	描述
width	device-width或正整数	定义视口的宽度，单位为像素，一般为device-width：表示宽度为设备屏幕的宽度
height	device-width或正整数	定义视口的高度，单位为像素，一般不用写
initial-scale	[0.0-10.0]	定义初始缩放值，一般设置为1.0
minimum-scale	[0.0-10.0]	定义放大最大比例，它必须小于或等于maximum-scale设置
maximum-scale	[0.0-10.0]	定义缩小最小比例，它必须大于或等于minimum-scale设置
user-scalable	yes / no	定义是否允许用户手动缩放页面，默认值 yes

注意：

viewport 标签只对移动端浏览器有效，对 PC 端浏览器是无效的

当缩放比例为 100% 时，dip 宽度 = CSS 像素宽度 = 理想视口的宽度 = 布局视口的宽度

单独设置 initial-scale 或 width 都会有兼容性问题，所以设置布局视口为理想视口的最佳方法是同时设置这两个属性

即使设置了 user-scalable = no，在 Android Chrome 浏览器中也可以强制启用手动缩放

来源：CSDN

作者：Lval

链接：https://blog.csdn.net/weixin_42215897/article/details/89400107