H5页面通用头部设置

见到很多人写H5页面都不设置头部，不忍直视，于是整理一篇文章，不定期更新，为了让自己显得专业一点，也为了方便自己复制粘贴

一般来说必须设置项

    <!-- 页面编码 -->
    <meta charset="UTF-8" />
    
    
    <!--
        http-equiv常见还有其它如下等（合理使用可增加 SEO 收录）。
        Content-Language : 设置网页语言
        Refresh : 指定时间刷新页面
        set-cookie : 设定页面 cookie 过期时间
        last-modified : 页面最后生成时间
        expires : 设置 cache 过期时间
        cache-control : 设置文档的缓存机制
        ...
        -->
    
    <!-- 缓存与过期时间设置 -->
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />//强制更新
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <meta http-equiv="Expires" content="0">
    
    <!-- dns预加载（SEO优化） -->
    <link rel="dns-prefetch" href="//css.cdn.com" />
    <link rel="dns-prefetch" href="//js.cdn.com" />
    
    <!-- 宽度默认100%全屏宽度，禁止手指缩放，初始缩放值1.0 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    
    
    <!-- ====必须设置 End==== -->

根据需要可配置项

<!-- ====根据使用配置Start==== -->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    
    <!-- 不自动识别手机号,邮箱地址 -->
    <meta name="format-detection" content="telephone=no,email=no">
    
    <!-- 页面关键字优化 -->
    <meta name="keywords" content="H5页面通用配置">
    <!-- 页面标签icon配置 -->
    <link rel="icon" href="//icon.img.com/favicon.ico" type="image/x-icon">
    <!-- 一些国内webkit内核浏览器默认使用极速模式 -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    
    <!-- apple-touch-icon：在webapp下，指定放置主屏幕上 icon 文件路径 -->
    <link rel="apple-touch-icon" href="touch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
    
    <!-- apple-touch-startup-image：在 webapp 下，设置启动时候的界面 -->
    
    <link rel="apple-touch-startup-image" href="/startup.png" />
    
    <!-- ====根据使用配置End==== -->

一些接近过时的参考项

<!--禁用IE8兼容模式（IE8兼容模式使用的是IE7的渲染方式）-->
    
    <meta http-equiv="X-UA-Compatible" content="IE=8" /> <!--//设置内核为IE8，这里改变时，下面会自动改变-->
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /><!--//设置渲染文档模式为IE8-->
    <!--使用IE8兼容模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=7" /><!--//设置内核为IE7，这里改变时，下面会自动改变-->
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" ><!--//设置渲染文档模式为IE7-->
    
    <!-- 从左向右依次查询使用内核，左侧优先级高 -->
    <meta http-equiv="X-UA-Compatible" content="IE=11;IE=10;IE=9; IE=8;" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11;IE=EmulateIE10;IE=EmulateIE9;IE=EmulateIE8" />
    
    <!--chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

完整代码：
地址