1. 程式人生 > 實用技巧 >HTML 常用meta

HTML 常用meta

<!-- 定義文件的字元編碼 -->
<meta charset="utf-8" /> 
<!-- 強制Chromium核心,作用於360瀏覽器、QQ瀏覽器等國產雙核瀏覽器 -->
<meta name="renderer" content="webkit"/>
<!-- 強制Chromium核心,作用於其他雙核瀏覽器 -->
<meta name="force-rendering" content="webkit"/>
<!-- 如果有安裝 Google Chrome Frame 外掛則強制為Chromium核心,否則強制本機支援的最高版本IE核心,作用於IE瀏覽器 
--> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/> <!-- 設定視窗大小 width 設定layout viewport 的寬度,為一個正整數,或字串"width-device" initial-scale 設定頁面的初始縮放值,為一個數字,可以帶小數 minimum-scale 允許使用者的最小縮放值,為一個數字,可以帶小數 maximum-scale 允許使用者的最大縮放值,為一個數字,可以帶小數 shrink-to-fit=no IOS9中要想前面的屬性起作用需要加上這個 height 設定layout viewport 的高度,這個屬性對我們並不重要,很少使用 user-scalable 是否允許使用者進行縮放,值為"no"或"yes", no 代表不允許,yes代表允許
--> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <!-- 頁面描述 --> <meta name="description" content="不超過150個字元"/> <!-- 頁面關鍵詞 --> <meta name="keywords" content=""/> <!-- 網頁作者
--> <meta name="author" content="name, [email protected]"/> <!-- 搜尋引擎抓取 all:檔案將被檢索,且頁面上的連結可以被查詢; none:檔案將不被檢索,且頁面上的連結不可以被查詢; index:檔案將被檢索; follow:頁面上的連結可以被查詢; noindex:檔案將不被檢索; nofollow:頁面上的連結不可以被查詢。 --> <meta name="robots" content="index,follow"/> <!-- 忽略頁面中的數字識別為電話,忽略email識別--> <meta name="format-detection" content="telphone=no, email=no"/> <!-- IOS begin --> <!-- 新增到主屏後的標題(iOS 6 新增) --> <meta name="apple-mobile-web-app-title" content="標題"> <!-- 當網站新增到主螢幕快速啟動方式,可隱藏位址列,僅針對ios的safari (ios7.0版本以後,safari上已看不到效果) --> <meta name="apple-mobile-web-app-capable" content="yes"/> <!-- 是否啟用 WebApp 全屏模式,刪除蘋果預設的工具欄和選單欄 --> <meta name="apple-touch-fullscreen" content="yes"/> <!-- 新增智慧 App 廣告條 Smart App Banner(iOS 6+ Safari) --> <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 設定蘋果工具欄顏色:預設值為 default(白色),可以定為 black(黑色)和 black-translucent(灰色半透明) --> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <!-- 不讓百度轉碼 --> <meta http-equiv="Cache-Control" content="no-siteapp" /> <!-- 針對手持裝置優化,主要是針對一些老的不識別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"> <!-- iOS 圖示 begin 網站新增至ios桌面時的圖示 --> <!-- iPhone 和 iTouch,預設 57x57 畫素,必須有 --> <link rel="apple-touch-icon-precomposed" sizes="57x57" href="table_ico57.png"> <!-- Retina iPhone 和 Retina iTouch,114x114 畫素,可以沒有,但推薦有 --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="table_ico72.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="table_ico114.png"> <!-- Retina iPad,144x144 畫素,可以沒有,但推薦有 --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="table_ico144.png"> <!-- iOS 啟動畫面 begin --> <!-- iPad 豎屏 768 x 1004(標準解析度) --> <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/> <!-- iPad 橫屏 1024x748(標準解析度) --> <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/> <!-- iPad 豎屏 1536x2008(Retina) --> <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/> <!-- iPad 橫屏 2048x1496(Retina) --> <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/> <!-- iPhone/iPod Touch 豎屏 320x480 (標準解析度) --> <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/> <!-- iPhone/iPod Touch 豎屏 640x960 (Retina) --> <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/> <!-- iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina) --> <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/> <!-- IOS end --> <!-- Windows 8 磁貼顏色 --> <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁貼圖示 --> <meta name="msapplication-TileImage" content="icon.png"/> <!-- 新增 RSS 訂閱 --> <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/> <!-- sns 社交標籤 begin --> <!-- 參考微博API --> <meta property="og:type" content="型別" /> <meta property="og:url" content="URL地址" /> <meta property="og:title" content="標題" /> <meta property="og:image" content="圖片" /> <meta property="og:description" content="描述" /> <!-- sns 社交標籤 end -->