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

完整代碼：
地址