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