移動開發常用head標簽
HTML5、移動開發meta標簽
- 聲明字符編碼<meta charset="utf-8">
關于html標簽中的lang屬性：
簡體中文<html lang="zh-cmn-Hans">
繁體中文<html lang="zh-cmn-Hant"> - 使用最新版的IE和Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> - 360 使用webkit內核渲染
<meta name="renderer" content="webkit"> - 禁止百度對網頁轉碼(百度的Siteapp頁面轉碼)<meta http-equiv="Cache-Control" content="no-siteapp" /> </ul>
- width viewport 寬度(數值/device-width)
- height viewport 高度(數值/device-height)
- initial-scale 初始縮放比例
- maximum-scale 最大縮放比例
- minimum-scale 最小縮放比例
- user-scalable 是否允許用戶縮放(yes/no) </ul>
- 添加到主屏后的標題
<meta name="apple-mobile-web-app-title" content="標題"> - 是否啟用webAPP進入全屏模式
<meta name="apple-mobile-web-app-capable" content="yes" /> -
狀態欄的背景顏色
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
content參數
</div>- default 默認值。
- black 狀態欄背景是黑色。
- black-translucent 狀態欄背景是黑色半透明。 如果設置為 default 或 black ,網頁內容從狀態欄底部開始。 如果設置為 black-translucent ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。 </ul> </li>
-
禁止數字識別為電話號碼
<meta name="format-detection" content="telephone=no" /> </div> </li> </ul>iOS圖標
link標簽，rel 參數： apple-touch-icon 圖片自動處理成圓角和高光等效果。
apple-touch-icon-precomposed 禁止系統自動添加效果，直接顯示設計原圖。
</div>- iPhone 和 iPod touch，默認 57×57px
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> - iPad，72×72px
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> - Retina iPhone 114×114px
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> - Retina iPad，144×144px
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> - iOS 圖標大小在iPhone 6+上是180×180，iPhone 6 是120×120
適配iPhone 6+<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">
</ul>
- iPad豎屏 768x1004
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> - iPad 豎屏 1536×2008（Retina）
- iPad 橫屏 1024×748（標準分辨率）
- iPad 橫屏 2048×1496（Retina） </ul>
- iPhone/iPod Touch 豎屏 320×480 (標準分辨率)<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" />
- iPhone/iPod Touch 豎屏 640×960 (Retina)
- iPhone 5/iPod Touch 5 豎屏 640×1136 (Retina)
-
iPhone 6對應的圖片大小是750×1294，iPhone 6 Plus 對應的是1242×2148 。
<link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)">
<link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)"> </div> </li>添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> </div> </li> </ul>Android
Android Lollipop 中的 Chrome 39 增加 theme-color meta 標簽，用來控制選項卡顏色。
<meta name="theme-color" content="#db5945"> </div>
Win 8
- Windows 8 磁貼顏色
<meta name="msapplication-TileColor" content="#000"/> - Windows 8 磁貼圖標
<meta name="msapplication-TileImage" content="icon.png"/>
</ul>
RSS
添加RSS訂閱
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
<!DOCTYPE html> <!-- 使用 HTML5 doctype，不區分大小寫 --> <html lang="zh-cmn-Hans"> <!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa --> <head> <!-- 聲明文檔使用的字符編碼 --> <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="author" content="name, email@gmail.com"/> <!-- 搜索引擎抓取 --> <meta name="robots" content="index,follow"/> <!-- 為移動設備添加 viewport --> <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!-- width=device-width 會導致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開頁面時出現黑邊 http://bigc.at/ios-webapp-viewport-meta.orz -->
<!-- iOS 設備 begin --> <meta name="apple-mobile-web-app-title" content="標題"> <!-- 添加到主屏后的標題（iOS 6 新增） --> <meta name="apple-mobile-web-app-capable" content="yes"/> <!-- 是否啟用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單欄 --> <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari） --> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <!-- 設置蘋果工具欄顏色 --> <meta name="format-detection" content="telphone=no, email=no"/> <!-- 忽略頁面中的數字識別為電話，忽略email識別 --> <!-- 啟用360瀏覽器的極速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 針對手持設備優化，主要是針對一些老的不識別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 --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/> <!-- iPhone 和 iTouch，默認 57x57 像素，必須有 --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以沒有，但推薦有 --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/> <!-- Retina iPad，144x144 像素，可以沒有，但推薦有 --> <!-- iOS 圖標 end --> <!-- iOS 啟動畫面 begin --> <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/> <!-- iPad 豎屏 768 x 1004（標準分辨率） --> <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/> <!-- iPad 豎屏 1536x2008（Retina） --> <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/> <!-- iPad 橫屏 1024x748（標準分辨率） --> <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/> <!-- iPad 橫屏 2048x1496（Retina） --> <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/> <!-- iPhone/iPod Touch 豎屏 320x480 (標準分辨率) --> <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/> <!-- iPhone/iPod Touch 豎屏 640x960 (Retina) --> <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/> <!-- iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina) --> <!-- iOS 啟動畫面 end --> <!-- iOS 設備 end --> <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁貼顏色 --> <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁貼圖標 --> <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/> <!-- 添加 RSS 訂閱 --> <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/> <!-- 添加 favicon icon --> <title>標題</title></head></pre>
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
iOS 啟動畫面
Apple的文檔 鏈接
iPad啟動畫面不包括狀態欄區域
</div>iPhone 和 iPod touch 的啟動畫面是包含狀態欄區域的
sesese色 - iPhone 和 iPod touch，默認 57×57px
viewport
經常寫：
<meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> </div>content參數：
iPhone 6 和 iPhone 6+ ：
<meta name="viewport" content="width=375"><meta name="viewport" content="width=414"> </div>