经常使用html5 head头标签整理

时间 2019-12-05

标签经常使用 html5 html head 标签整理栏目 HTML5 繁體版

原文原文链接

平时工做中，常常会接手一些同事开发过的项目，须要我拿来二次开发、项目优化什么的。我发现这些项目的html文件里head头部每每不够引发重视，都是互相copy，有些甚至是错的，重复的，给二次开发的人埋下地雷。html

刚开发的微信商城项目里，测试同事就反应说一点击输入帐号的输入框，边框就超出页面看不到了。这一看就是忘记设置视口的问题。一翻代码，果真是。赶忙修正了问题，真是不能小看head头部的问题。android

下午我从网上翻看资料，整理了一份详细的head头部设置，加上详细注释，方便之后翻阅。项目进度紧急的状况下，也能够拿来直接使用。ios

<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>