刚刚我们说到了处理click事件延时,其中有种采用禁止缩放的方式,这种方式就用到了meta,下面我们介绍一下移动端几种常用的meta
viewport视口
下面是我们常用的viewport视口设置:
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no">
viewport对于移动端设备来说非常的重要,它用于定义视口的各种行为:
| 名称 | 描述 |
|---|---|
| width=device-width | 设置视口宽度 |
| initial-scale | 初始的缩放比例(范围从0~10) |
| minimum-scale | 允许用户缩放到的最小比例(范围从0~10) |
| maximum-scale | 允许用户缩放到的最大比例(范围从0~10) |
| user-scalable | 用户是否可以手动缩放 |
width=device-width对我们移动端的适配非常的重要,如果我们不设置的话,width默认的值是980px,假如我们用手机来访问页面,由于手机本身的宽度并没有达到980px,所以用户会不能很清晰的浏览页面内容.width=device-width代表是当前设备屏幕有多宽，那么就按照多宽来渲染页面,这样可以大大提高用户体验.
format-detection格式检测
下面的meta用来检测页面的一些通用格式:
<meta name="format-detection" content="telephone=no, email=no,adress=no">
format-detection用于页面格式检测:
| 名称 | 描述 |
|---|---|
| telephone | 设置自动将数字转化为拨号连接 |
| 设置自动识别邮箱 | |
| adress | 设置自动识别地址 |
format-detection里面的内容默认开启,在我们开发中可能会出现禁止自动识别的需求,所以在移动端适配时,我们可以利用meta按需开启或关闭.
