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">
2. apple-mobile-web-app-capable 设置Web应用是否以全屏模式运行。
语法: <meta name="apple-mobile-web-app-capable" content="yes">
说明: 如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。
content的默认值是no,表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
兼容性: iOS 2.1 +
3. apple-mobile-web-app-status-bar-style 设置Web App的状态栏(屏幕顶部栏)的样式
语法: <meta name="apple-mobile-web-app-status-bar-style" content="black">
说明: 除非你先使用apple-mobile-web-app-capable指定全屏模式,否则这个meta标签不会起任何作用。
它指定的iphone中safari顶端的状态条的样式;在web app应用下状态条(屏幕顶部条)的颜色;默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。
注意: 若值为“black-translucent”则页面会充满屏幕,将会占据页面位置,浮在页面上方,其中页面顶部会被状态栏遮盖住(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。
如果content设置为default,则状态栏正常显示。如果设置为black,则状态栏会有一个黑色的背景。
如果设置为default或black,则页面显示在状态栏的下方,即状态栏占据上方部分,页面占据下方部分,二者没有遮挡对方或被遮挡。
兼容性: iOS 2.1 +
4. format-detection 启动或禁用自动识别页面中的电话号码。
语法: <meta name="format-detection" content="telephone=no"> 告诉设备忽略将页面中的数字识别为电话号码
说明: 默认情况下,设备会开启自动识别任何可能是电话号码的字符串。
telephone=no 禁止把数字转化为拨号链接!telephone=yes 开启把数字转化为拨号链接
兼容性: iOS 1.0 +