Meta

移动端的几种常用meta

viewport视口的设置,format-detection格式检测,其他常用移动端浏览器设置

2018-09-09侠课岛    初级拔高       

前端/前端/响应式网站基础入门 18     0     4252

刚刚我们说到了处理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 设置自动将数字转化为拨号连接
email 设置自动识别邮箱
adress 设置自动识别地址

format-detection里面的内容默认开启,在我们开发中可能会出现禁止自动识别的需求,所以在移动端适配时,我们可以利用meta按需开启或关闭.

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

18

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?