meta

meta屬性在HTML中佔據了很重要的位置。如：針對搜索引擎的SEO，文檔的字符編碼，設置刷新緩存等。雖然一些網頁可能沒有使用meta，可是做爲正規軍，咱們仍是有必要了解一些meta的屬性，而且可以熟練使用它們。

一、name之viewport

<meta name="viewport" content=""> 

說明：屏幕的縮放

content的幾個屬性：
width viewport的寬度[device-width | pixel_value]width若是直接設置pixel_value數值，大部分的安卓手機不支持，可是ios支持；
height – viewport的高度 （範圍從 223 到 10,000 ）
user-scalable [yes | no]是否容許縮放
initial-scale [數值]初始化比例（範圍從 > 0 到 10）
minimum-scale [數值]容許縮放的最小比例
maximum-scale [數值]容許縮放的最大比例
target-densitydpi值有如下（通常推薦設置中等響度密度或者低像素密度，後者設置具體的值dpi_value，另外webkit內核已不許備再支持此屬性）
-- dpi_value 通常是70-400//沒英寸像素點的個數
-- device-dpi設備默認像素密度
-- high-dpi高像素密度
-- medium-dpi 中等像素密度
-- low-dpi低像素密度

完整案例：

<meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi "> 

二、name之format-detection忽略電話號碼和郵箱

<meta name="format-detection" content="telephone=no"> 

說明：忽略頁面中的數字識別爲電話號碼

<meta name="format-detection" content="email=no"/> 

說明：忽略頁面中的郵箱格式爲郵箱
也能夠寫成：

<meta name="format-detection" content="telphone=no, email=no"/> 

三、name之設置做者姓名及聯繫方式
說明：設置做者姓名及聯繫方式

<meta name="author" contect="name, xxx@163.com" /> 

四、iOS 啓動畫面

iPad 的啓動畫面是不包括狀態欄區域的。
iPad 豎屏 768 x 1004（標準分辨率）
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" />iPad 豎屏 1536x2008（Retina） <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" />iPad 橫屏 1024x748（標準分辨率） <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" />iPad 橫屏 2048x1496（Retina） <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> iPhone 和 iPod touch 的啓動畫面是包含狀態欄區域的。 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" /> <link rel="apple-touch-startup-image" href="Startup.png" /> 當用戶點擊主屏圖標打開 WebApp 時，系統會展現啓動畫面，在未設置狀況下系統會默認顯示該網站的首頁截圖，固然這個體驗不是很好 

五、其餘

<!-- 聲明文檔使用的字符編碼 --> <meta charset='utf-8'> <!-- 優先使用 IE 最新版本和 Chrome --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <!-- 頁面描述 --> <meta name="description" content="不超過150個字符"/> <!-- 頁面關鍵詞 --> <meta name="keywords" content=""/> <!-- 搜索引擎抓取 --> <meta name="robots" content="index,follow"/> <!-- 啓用360瀏覽器的極速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 不讓百度轉碼 --> <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"> <!-- 添加 RSS 訂閱 --> <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/> <!-- 添加 favicon icon --> <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/> <!-- 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 --> <!-- Windows 8 磁貼顏色 --> <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁貼圖標 --> <meta name="msapplication-TileImage" content="icon.png"/> <!-- windows phone 點擊無高光 --> <meta name="msapplication-tap-highlight" content="no"> 

六、IE條件註釋設置

條件註釋判斷IE瀏覽器，<!--[if IE]>條件註釋區分非IE瀏覽器 <!--[if IE]> Only IE <![endif]--> 全部的IE可識別 <!--[if IE 5.0]> Only IE 5.0 <![endif]--> //只有IE5.0能夠識別 <!--[if gt IE 5.0]> Only IE 5.0+ <![endif]--> //高於IE5.0均可以識別 <!--[if lt IE 6]> Only IE 6- <![endif]--> //低於IE6可識別 <!--[if gte IE 6]> Only IE 6/+ <![endif]--> IE6以及IE6以上均可識別 <!--[if lte IE 7]> Only IE 7/- <![endif]--> IE7及ie7如下版本可識別 <!--[if (gte IE 9)|!(IE)]><!--><html> <!--<![endif]--> 

大於等於ie9或者非ie瀏覽器 lte：就是Less than or equal to的簡寫，也就是小於或等於的意思。 lt ：就是Less than的簡寫，也就是小於的意思。 gte：就是Greater than or equal to的簡寫，也就是大於或等於的意思。 gt ：就是Greater than的簡寫，也就是大於的意思。 ! ：就是不等於的意思，跟javascript裏的不等於判斷符相同

做者：書越 連接：https://www.jianshu.com/p/ad8687c6ddfa 來源：簡書 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。