HTML meta标签详解

meta标签是HTML中head头部的一个辅助性标签,
虽然这部分信息用户不可见，但是其作用非常强大，特别是当今的前端开发工作中，设置合适的meta标签可以大大提升网站页面的可用性。

//我移动端项目中常用的meta标签（仅供参考，如下是详细解释）
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <meta name="x5-orientation" content="portrait|landscape">
 <meta name="x5-fullscreen" content="true">
 <meta name="x5-page-mode" content="app">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">

meta详解：

<!-- 设置文档的字符编码 -->
<meta charset="UTF-8">

<!-- 用于移动端 设置视口宽度等于屏幕宽度 -->
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

<!-- IE8专有属性，告诉IE8采用何种IE版本去渲染网页 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<!-- 告诉 Google 不提供此页面的翻译 -->
<meta name="google" content="notranslate">

<!-- 缓存控制 -->
<!-- 最好在服务器端配置缓存控制 -->
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">

QQ浏览器
QQ 浏览器（X5 内核）同样适用于微信，QQ等第三方应用页面开发

<!-- 设置锁定横屏、竖屏显示模式，portrait（横屏），landscape（竖屏）-->
<meta name="x5-orientation" content="portrait|landscape">
<!-- 设置全屏显示页面 -->
<meta name="x5-fullscreen" content="true">
<!-- 开启页面以应用模式显示（全屏显示等） -->
<meta name="x5-page-mode" content="app">

360浏览器
设置 360 浏览器渲染模式：webkit 为极速内核，ie-comp 为 IE 兼容内核，ie-stand 为 IE 标准内核

<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

UC 浏览器
设置屏幕方向
portrait 为横屏，landscape 为竖屏。

<meta name="screen-orientation" content="portrait|landscape">

设置全屏

<meta name="full-screen" content="yes">

Apple iOS原生浏览器
忽略数字自动识别为电话号码

<meta name="format-detection" content="telephone=no">

启用 WebApp 全屏模式

<meta name="apple-mobile-web-app-capable" content="yes">

添加到主屏后设置状态栏的背景颜色

<meta name="apple-mobile-web-app-status-bar-style" content="black">

只有在 “apple-mobile-web-app-capable” content=”yes” 时生效。

• 如果设置为 default 或 black ，网页内容从状态栏底部开始。
• 如果设置为 black-translucent ，网页内容充满整个屏幕，顶部会被状态栏遮挡。

iOS 图标

<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">

Google Android原生浏览器

添加到主屏

<!-- 添加到主屏 -->
<meta name="mobile-web-app-capable" content="yes">