移动端声明及meta标签设置
移动端meta标签设置
1.设置当前html⽂件的字符编码
<meta charset="UTF-8">
1
2设置浏览器的兼容模式（让IE使⽤最新的浏览器渲染）
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
1
3.视⼝（快捷键：meta:vp）
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-
scale=1.0"/>
1
作⽤：在移动浏览器中，当页⾯宽度超出设备，浏览器内部虚拟的⼀个页⾯容器，将页⾯容器缩放到设备那么⼤展⽰；
视⼝的宽度可以通过meta标签设置；
此属性为移动端页⾯视⼝设置；
width：视⼝的宽度，width=device-width：宽度是设备的宽度
initial-scale：初始化缩放，- initial-scale=1.0：不缩放
user-scalable：是否允许⽤户⾃⾏缩放，取值0或1，yes或no
minimum-scale：最⼩缩放
maximum-scale：最⼤缩放
⼀般设置了不允许缩放，就没必要设置最⼤最⼩缩放了。
4.Cache-Control头域
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
1
Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另⼀个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下,
no-cache指⽰请求或响应消息不能缓存
no-store⽤于防⽌重要的信息被⽆意的发布。在请求消息中发送将使得请求和响应消息都不使⽤缓存
must-revalidate：告诉浏览器、缓存服务器，本地副本过期前，可以使⽤本地副本；本地副本⼀旦过期，必须去源服务器进⾏有效性校验。
5.是⽤于设定禁⽌浏览器从本地机的缓存中调阅页⾯内容，设定后⼀旦离开⽹页就⽆法从Cache中再调出
<meta http-equiv="Pragma" content="no-cache"/>
1
6.禁⽌将页⾯中的⼀连串数字识别为电话号码、并设置为⼿机可以拨打的⼀个连接。
这个标签的默认值是telephone=yes。
<meta content="telephone=no" name="format-detection"/>
1
7.删除默认的苹果⼯具栏和菜单栏
<meta content="yes" name="apple-mobile-web-app-capable"/>
1
meta大裁员
当我们需要显⽰⼯具栏和菜单栏时，这个⾏meta就不⽤加了，默认就是显⽰。
8.控制状态栏显⽰样式
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
1
content设置状态栏颜⾊
9.条件注释
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
- html5shiv让浏览器可以识别html5的新标签；
- respond让低版本浏览器可以使⽤CSS3的媒体查询。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。