經常使用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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。