前端手札－－meta標記篇

通用類：

聲明編碼

<meta charset='utf-8' />

SEO頁面關鍵詞

<meta name="keywords" content="your tags" />

SEO頁面描述

<meta name="description" content="150 words" />

頁面重定向和刷新

content內的數字表明時間（秒），既多少時間後刷新。若是加url,則會重定向到指定網頁（搜索引擎可以自動檢測，也很容易被引擎視做誤導而受到懲罰）。

<meta http-equiv="refresh" content="0;url=" />

 

移動端類：

viewport

禁用沒必要要的自動縮放，優化移動瀏覽器顯示

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- `width=device-width` 會致使 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊 -->
<!-- user-scalable=no 安卓的Chrome能夠去除瀏覽器的300ms點擊延時  -->

忽略識別爲電話號碼 和 郵箱

防止HTML有改變而致使可能的部分JS執行錯誤，據實測若是識別爲電話號碼則蘋果會把修改html，在數字外套一層<a>標籤，可能會在產品編號這一類用途的數字形成干擾

<!--禁止自動識別爲電話號碼連接，主要爲蘋果-->
<meta name="format-detection" content="telephone=no" />
<!--禁止自動識別郵箱，主要爲安卓-->
<meta name="format-detection" content="email=no" />

其它一些移動端實用META

<!-- 針對手持設備優化，主要是針對一些老的不識別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="screen-orientation" content="landscape"> <!-- QQ強制橫屏 --> <meta name="x5-orientation" content="landscape">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- Safari全屏？未確認 注意是在viewport裏面直接附加下面這個屬性 -->
<meta name="viewport" content="minimal-ui"/>

<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<!-- Safari 啓用 WebApp 應用全屏模式，這個只會在你保存爲桌面應用後從中打開纔會全屏，在瀏覽器中不會全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">

添加到主屏（蘋果 IOS Safari）

<!-- 啓用 WebApp 應用全屏模式，這個只會在你保存爲桌面應用後從中打開纔會全屏，在瀏覽器中不會全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--保存某個頁面到桌面的時候的應用標題-->
<meta name="apple-mobile-web-app-title" content="標題">
<!--保存某個頁面到桌面的時候使用這張圖做爲桌面圖標，尺寸和iphone上的一致，是57*57px-->
<link rel="apple-touch-icon" href="custom_icon.png">
<!--啓動圖，只使用一張114*114的圖片便可-->
<link rel="apple-touch-icon-precomposed" href="startup/apple-touch-icon-114x114-precomposed.png" />

避免百度轉碼

<meta http-equiv="Cache-Control" content="no-siteapp" />

 

PC端：

IE 優先使用已安裝的最新IE版本和Chrome外掛插件（需用戶已安裝Google Chrome Frame）

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

360雙核瀏覽器選擇默認內核（首次打開有效，用戶可更改且會記住用戶記錄），搜狗瀏覽器暫無此支持

<meta name="renderer" content="webkit"><!--使用極速核-->
<meta name="renderer" content="ie-comp"> <!--使用IE兼容核-->
<meta name="renderer" content="ie-stand"><!--使用IE標準核-->

 網頁標題欄的圖標

<link rel="shortcut icon" type="image/x-icon" href="/Public/pub/image/favicon.ico"><!--大小爲16*16-->

若是在網站項目根目錄下放一個favicon.ico圖標文件，那麼上面這句不寫也能夠達到瀏覽器標籤欄有圖標的效果。

 

注：本文大部分轉自「菜鳥筆記」，原文連接http://www.runoob.com/w3cnote/meta.html