在移动端我们往往需要设置一些meta属性来达到我们需要的一些效果。
1.比较重要的：
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1，shrink-to-fit=no, viewport-fit=cover">
width=device-width：设备宽度；
user-scalable=no：是否可以缩放，可以设置为no或者0；
initial-scale=1.0：初始缩放比例
maximum-scale=1.0 ：最大缩放比例
minimum-scale=1：最小缩放比例
shrink-to-fit=no ： 解决ios9中的bug 识别屏幕宽度
viewport-fit=cover 解决苹果x 刘海的问题
2. 针对苹果手机：
<meta name="apple-mobile-web-app-capable" content="yes">
可以把页面已app的方式添加到桌面
<meta name="apple-mobile-web-app-status-bar-style" content="black">
如果你把app添加到桌面，改状态条的颜色
<meta content=yes name=apple-touch-fullscreen>
允许全屏展示
<meta name="format-detection" content="telephone=no,email=no">
禁止识别数字为电话,email
3.不常用的：
<meta name=App-Config content="fullscreen=yes,useHistoryState=yes,transition=yes">
应用信息，保留系统的历史记录，运动效果
<meta http-equiv="Cache-Control" content="max-age=180">
max-age=180 响应时间
<meta http-equiv="x-dns-prefetch-control" content="on" />
好处：访问快
解决 dns缓存问题
4.一些其他的：
<!-- 强制让360浏览器用chrome内核渲染页面 -->
<meta name="renderer" content="webkit">
<!-- 尽量用IE最新的模式渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
