特有标签
1.设置浏览器兼容版本
<meta http-equiv="X-UA-Compatible" content="IE=8"> 表示IE浏览器默认版本为8
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 表示IE浏览器默认选择最高版本
2. 手机端特有的标签
(1).视口
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
视口的作用:在移动浏览器中,当页面宽度超出设备,浏览器内部虚拟的一个页面容器,将页面容器缩放到设备这么大,然后展示。
目前大多数手机浏览器的视口(承载页面的容器)宽度都是980;
视口的宽度可以通过meta标签设置
此属性为移动端页面视口设置,当前值表示在移动端页面的宽度为设备的宽度,并且不缩放(缩放级别为1)
+ width:视口的宽度
+ initial-scale:初始化缩放
+ user-scalable:是否允许用户自行缩放(值:yes/no; 1/0)
+ minimum-scale:最小缩放,一般设置了用户不允许缩放,就没必要设置最小和最大缩放
+ maximum-scale:最大缩放
<meta content="yes" name="apple-mobile-web-app-capable">
该meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;
(3).顶部状态条的颜色
<meta content="black" name="apple-mobile-web-app-status-bar-style"
该meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;
在web app应用下状态条(屏幕顶部条)的颜色;默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。注意:若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。
(4).忽略数字识别为电话号码
<meta content="telephone=no" name="format-detection">
该meta标签表示:告诉设备忽略将页面中的数字识别为电话号码。