常用html5 head头标签整理
平时工作中，经常会接手一些同事开发过的项目，需要我拿来二次开发、项目优化什么的。我发现这些项目的html文件里head头部往往不够引起重视，都是互相copy，有些甚至是错的，重复的，给二次开发的人埋下地雷。
刚开发的微信商城项目里，测试同事就反应说一点击输入账号的输入框，边框就超出页面看不到了。这一看就是忘记设置视口的问题。一翻代码，果然是。赶紧修正了问题，真是不能小看head头部的问题。
下午我从网上翻看资料，整理了一份详细的head头部设置，加上详细注释，方便以后翻阅。项目进度紧急的情况下，也可以拿来直接使用。
<head>
<meta charset="utf-8">
<!-- 360浏览器极速模式渲染 -->
<meta name="renderer" content="webkit">
<!-- 360浏览器渲染模式补充 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- IE8以下以IE7标准模式呈现网页，而IE9则以IE9的标准模式呈现网页： -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<!-- 如果安装了GCF，则使用GCF来渲染页面（"chrome=1"），
如果没有安装GCF，则使用最高版本的IE内核进行渲染（"IE=edge"）-->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- 页面标题 -->
<title></title>
<!-- 移动端视口，fix ios webapp黑色border问题 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<!-- seo部分 （描述限制 150 字符）-->
<meta name="keywords" content="地狗商城">
<meta name="description" content="地狗商城">
<!-- 外部资源加载白名单 防止XSS -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- 百度搜索 -->
<!-- 移动端 pc,mobile 自适应页面 -->
<meta name="applicable-device" content="mobile">
<!-- 告诉百度不要转码 -->
<meta http-equiv="Cache-Control" content="no-transform" />
<!-- 告诉百度不要转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- Apple iOS原生浏览器 -->
<!-- 忽略数字自动识别为电话号码 -->
<meta name="format-detection" content="telephone=no">
<!-- 启用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 添加智能 App 广告条 -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
<!-- uc浏览器设置全屏显示页面 -->
<meta name="full-screen" content="yes">
<!-- 设置屏幕方向 portrait 竖屏-->
<meta name="screen-orientation" content="portrait|landscape"/>
<!--
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">
<!-- APP链接 -->
<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">
<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks">
<!-- Web Fallback -->
<meta property="al:web:url" content="http://applinks.org/documentation">
<!-- More info: http://applinks.org/documentation/ -->
</head>
