<meta/>标签大杂烩_在配置视口属性时,user-scalable用于设置用户是否可以缩放,默认为-CSDN博客

本文链接：https://blog.csdn.net/qq_36671474/article/details/53160917

META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等，并不是专门给搜索引擎而设的。但其中的keyword 和 description 是搜索引擎来找到网页的一个方式。

1. Viewport

viewport即可视区域，对于桌面浏览器而言，viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域;

语法： <meta name="viewport" content="width=device-width,initial-scale=2.3,user-scalable=no">

说明：使用viewport 可以提升页面在设备上的表现效果，你可以设置视口（viewport）的宽度和初始缩放比例。

兼容性： iOS 1.0 +

如果页面的宽度小于980px，你可以设置视口的宽度以适应页面。如果你正在开发一款Web应用，你应该设置视口的宽度为设备的宽度。

注意：当有多个属性时，应该使用逗号分隔赋值表达式。设置多个属性时请遵循以下规则：

不要使用分号作为分隔符。
空格也可以作为分隔符，但最好使用逗号。
对于属性值是数字的属性，如果属性值包含了非数字字符但是以数字开头，那么只有数字的部分被当做属性值。例如，1.0x等价于1.0，123x456等价于123。如果参数不以数字开头，则属性值为0。
当要用到设备的尺寸数据时，你可以使用表2中的常量替代数字值。例如，使用device-width替代320（宽度），用device-height替代480（高度）。
你不需要设置每一个属性，未设置的属性会自动采用默认值。

Viewport属性
width 视口的宽度。默认值是980，取值范围是200至10000，也可以取值为常量device-width。
height 视口的高度。默认值是根据width的值和设备的宽高比来计算，取值范围是223至10000，也可以取值为常量device-height。
initial-scale 视口的初始缩放比例。默认值取决于页面充满屏幕的缩放比例，取值范围取决于minimum-scale和maximum-scale。
minimum-scale 视口的最小缩放比例。默认值是0.25，取值范围是>0至10.0。
maximum-scale 视口的最大缩放比例。默认值是5.0，取值范围是>0至10.0。
user-scable 设置用户是否可以缩放视口。yes表示可以，no表示不能，默认值是yes。设置user-scable为no可以防止当用户在input标签的文本域中输入文本时页面发生滚动。

特殊的viewport属性值
属性值描述
device-width 设备的宽度（像素）。
device-height 设备的高度（像素）。

设置视口的宽度为设备的宽度： <meta name="viewport" content="width=device-width">
设置初始缩放比例为1.0： <meta name="viewport" content="initial-scale=1.0">
设置初始缩放比例，同时禁止用户缩放。 <meta name="viewport" content="initial-scale=2.3, user-scalable=no">