常用:
<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" />
- 字符编码
- 视口
- 设置浏览器的兼容模式(让IE使用最新的浏览器渲染)
- no-cache指示请求或响应消息不能缓存,no-store在请求消息中发送将使得请求和响应消息都不使用缓存,must-revalidate:告诉浏览器、缓存服务器,本地副本过期前,可以使用本地副本;本地副本一旦过期,必须去源服务器进行有效性校验。
- 删除ios的safari浏览器工具栏和菜单栏,ios7.0版本后看不到效果
- ios的safari浏览器content设置状态栏颜色
- 忽略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极速模式 -->