移动端适配专题（一）之 meta

尊重原创，如需转载请注明出处！

常用：

<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width,initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"/>
<meta name="format-detection" content="email=no, telephone=no" />

1. 字符编码
2. 视口
3. 设置浏览器的兼容模式（让IE使用最新的浏览器渲染）
4. no-cache指示请求或响应消息不能缓存，no-store在请求消息中发送将使得请求和响应消息都不使用缓存，must-revalidate：告诉浏览器、缓存服务器，本地副本过期前，可以使用本地副本；本地副本一旦过期，必须去源服务器进行有效性校验。
5. 删除ios的safari浏览器工具栏和菜单栏，ios7.0版本后看不到效果
6. ios的safari浏览器content设置状态栏颜色
7. 忽略Android平台中对邮箱地址的识别，ios忽略数字转为电话号码

属性	范围	定义
width	正整数/device-width	定义窗口宽度，单位像素
height	正整数/device-height	定义窗口宽度，单位像素，一般不用
initial-scale	[0.0-10.0]	定义初始缩放值
maximum-scale	[0.0-10.0]	定义放大最大比例，≥mininum-scale设置
minimum-scale	[0.0-10.0]	定义缩小最小比例，≤maximum-scale设置
user-scalable	[0.0-10.0]	定义是否允许用户手动缩放页面

特殊：

<meta name="keywords" content=""><!-- 关键字 -->
<meta name="description" content=""><!-- 关键描述 -->
<meta name="msapplication-tap-highlight" content="no"><!-- windows phone 点击无高光 -->

<meta name="MobileOptimized" content="320"><!-- 老版IE定义宽度标记-->
<meta name="HandheldFriendly" content="true" /><!-- IE是否对手持设备友好，只有true或者false-->

<meta name="screen-orientation" content="portrait"><!-- uc强制竖屏 -->
<meta name="screen-orientation" content="landscape"><!-- uc强制横屏 -->
<meta name="full-screen" content="yes"><!-- uc强制全屏 -->
<meta name="browsermode"  content="application"><!-- uc应用模式 -->
<meta name="viewport" content="uc-fitscreen=yes"/><!-- uc缩放不出滚动条，设置为yes后不出现横向滚动条 -->
<meta name="nightmode" content="disable"/><!-- 禁用uc夜间模式 -->
<meta name="imagemode” content="force"/><!-- 禁用uc浏览器的无图模式 -->

<meta name="x5-orientation" content="portrait"><!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="landscape"><!-- QQ强制横屏 -->
<meta name="x5-fullscreen" content="true"><!-- QQ强制全屏 -->
<meta name="x5-page-mode" content="app"><!-- QQ应用模式 -->

<meta name="renderer" content="webkit">  <!-- 360极速模式 -->