1 name=viewport
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
1、width : 控制viewport的大小,可以指定一個值,如600, 或者特殊的值,如device-width為裝置的寬度(單位為縮放為100%的CSS的像素)
2、height : 和width相對應,指定高度
3、initial-scale : 初始縮放比例,頁面第一次載入時的縮放比例
4、maximum-scale : 允許使用者縮放到的最大比例,範圍從0到10.0
5、minimum-scale : 允許使用者縮放到的最小比例,範圍從0到10.0
6、user-scalable : 使用者是否可以手動縮放,值可以是:①yes、 true允許使用者縮放;②no、false不允許使用者縮放
2 meta中的name屬性
<!--用以說明產生工具--><meta name="Generator" content=""> <!--向搜尋引擎說明你的網頁的關鍵詞--><meta name="Keywords" content=""> <!-- 告訴搜尋引擎你的網站的主要內容--><meta name="Description" content=""> <!-- 告訴搜尋引擎你的網站的製作的作者 --> <meta name="Author" content="你的姓名"><meta name="Robots" content= "all|none|index|noindex|follow|nofollow"><!-- 設定為all:檔案將被檢索,且頁面上的連結可以被查詢; 設定為none:檔案將不被檢索,且頁面上的連結不可以被查詢; 設定為index:檔案將被檢索; 設定為follow:頁面上的連結可以被查詢; 設定為noindex:檔案將不被檢索,但頁面上的連結可以被查詢; 設定為nofollow:檔案將不被檢索,頁面上的連結可以被查詢。-->
3 meta中的 http-equiv屬性
<!--設定字元編碼和檔案格式--><meta http-equiv="Content-Type" content="text/html";charset=utf-8"><!--設定定時重新整理--><meta http-equiv="Refresh" content="n;url=http://.......><!-- 告訴瀏覽器不要快取頁面面--><meta http-equiv="Pragma" content="no-cache"><! -- //告訴瀏覽器不要快取頁面面--><meta http-equiv="cache-control" content="no-cache">//告訴瀏覽器不要快取頁面面<!--禁用瀏覽器緩衝此頁面--><meta http-equiv="expires" content="0"><!--設定ie的文檔相容模式,設定IE7+的瀏覽器以IE7的相容模式查看頁面--><meta http-equiv="X-UA-Compatible" content="IE=7">
4 html5中更多的meta與link
<!DOCTYPE html> <!-- HTML5 doctype 不區分大小寫 --><html lang="zh"> <!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa --> <head><meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 優先使用IE最新版本和 Chrome --><meta name="renderer" content="webkit|ie-comp|ie-stand"> <!-- 360 瀏覽器核心控制 --><!--content的取值為webkit,ie-comp,ie-stand之一,區分大小寫,分別代表用webkit核心,IE相容核心,IE標準核心。若頁面需預設用極速核,增加標籤:<meta name="renderer" content="webkit"> 若頁面需預設用ie相容核心,增加標籤:<meta name="renderer" content="ie-comp"> 若頁面需預設用ie標準核心,增加標籤:<meta name="renderer" content="ie-stand">--><!-- width=device-width 會導致 iPhone 5 添加到主屏後以 WebAPP 全螢幕模式開啟頁面時出現黑邊 http://bigc.at/ios-webapp-viewport-meta.orz --><meta name ="viewport" content ="initial-scale=1.0, maximum-scale=3, minimum-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-title" content="標題"> <!-- 添加到主屏時的標題 --> <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否啟用 WebAPP 全螢幕模式 --> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 狀態條顏色 --> <meta name="format-detection" content="telephone=no" /> <!-- 屏蔽數字自動識別為電話號碼 --><!-- favicon 表徵圖 --><link type="image/x-icon" rel="icon" href="http://static.example.com/favicon.ico"/><link type="image/x-icon" rel="shortcut icon" href="http://static.example.com/favicon.ico"/><link type="image/x-icon" rel="bookmark" href="http://static.example.com/favicon.ico"/><!-- iOS 表徵圖 begin --><!--預設 57x57 像素--><link rel="apple-touch-icon-precomposed" href="http://wanke.etao.com/assets/img/icon/57/apple-touch-icon-57x57-precomposed.png" /><!--iPad 1 72x72 像素--><link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://wanke.etao.com/assets/img/icon/72/apple-touch-icon-72x72-precomposed.png" /><!--iPhone 4 114x114 像素--><link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://wanke.etao.com/assets/img/icon/114/apple-touch-icon-114x114-precomposed.png" /><!-- iOS 表徵圖 end --> <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁貼顏色 --><meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁貼表徵圖 --><!-- SEO 最佳化 --><meta name="description" content="" /> <!-- 頁面描述 --><meta name="keywords" content=""/> <!-- 頁面關鍵詞 --><title>頁面標題</title><!-- iOS 應用啟動介面設定 begin --><!-- iPad Landscape – 1024 x 748 --><link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" /><!-- iPad Portrait – 768 x 1004 --><link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" /><!-- iPhone/iPod Touch Portrait – 320 x 480 (standard resolution) --><link rel="apple-touch-startup-image" href="img/splash-screen-320x480.png" /><!-- iPhone/iPod Touch Portrait – 640 x 960 pixels (high-resolution) --><link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" /><!-- iOS 應用啟動介面設定 end --></head>