經常使用html5 head頭標籤整理

       平時工做中,常常會接手一些同事開發過的項目,須要我拿來二次開發、項目優化什麼的。我發現這些項目的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>
相關文章
相關標籤/搜索