移動web開發經常使用屬性

<!-- html5 doctype -->
<!doctype html>
<!-- lang 屬性設置,中文頁面儘可能不要設置爲 "en",這會開啓 Chrome 默認提示是否翻譯網頁 -->
<html lang="zh-cn">
<head>
<!-- 聲明文檔字符編碼 -->
<meta charset="utf-8">
<!-- 
默認狀況下不考慮使用渲染模式設置
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
-->
<!-- 頁面描述 -->
<meta name="description" content="頁面描述,控制在150字之內" />
<!-- 頁面關鍵詞 -->
<meta name="keywords" content="關鍵字列表" />
<!-- author -->
<meta name="author" content="basecss, i@basecss.net" />
<!-- 搜索引擎抓取設置 -->
<meta name="robots" content="index, follow" />
<!-- 爲移動設備設置 viewport -->
<!-- width=device-width 會致使 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊 http://bigc.at/ios-webapp-viewport-meta.orz -->
<meta name="viewport" content="width=device-width,initial-scale=1, minium-scale=1, user-scalable=no">
<!-- iOS 移動設備添加主屏幕標題設置 -->
<meta name="apple-mobile-web-app-title" content="My App" > <!--iOS6 新增的特性-->
<!-- 是否啓用全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 全屏時狀態顏色設置 -->
<meta name="apple-mobile-web-status-bar-style" content="black-translucent">
<!-- 禁用電話號碼自動識別 -->
<meta name="format-detection" content="telephone=no">
<!-- 添加智能 App 廣告條 Smart App Banner(iOS 6+ Safari), 默認禁用 -->
<!--
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
-->
<!-- iOS 圖標 -->
<!-- rel="apple-touch-icon-precomposed"啓用圖標高亮 -->
<!-- 非視網膜 iPhone 低於 iOS 7 -->
<link rel="apple-touch-icon" href="icon57.png" sizes="57x57">
<!-- 非視網膜 iPad 低於 iOS 7 -->
<link rel="apple-touch-icon" href="icon72.png" sizes="72x72">
<!-- 非視網膜 iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon76.png" sizes="76x76">
<!-- 視網膜 iPhone 低於 iOS 7 -->
<link rel="apple-touch-icon" href="icon114.png" sizes="114x114">
<!-- 視網膜 iPhone iOS 7 -->
<link rel="apple-touch-icon" href="icon120.png" sizes="120x120">
<!-- 視網膜 iPad 低於 iOS 7 -->
<link rel="apple-touch-icon" href="icon144.png" sizes="144x144">
<!-- 視網膜 iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon152.png" sizes="152x152">
<!-- Android 啓動圖標 -->
<link rel="shortcut icon" sizes="128x128" href="icon.png">
<!-- iOS 啓動畫面 -->
<!-- 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 豎屏 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" />
<!-- 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" />
<!-- 添加 favicon icon -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
<!-- 頁面標題 -->
<title>標題</title>
</head>

<body>

</body>
</html>
相關文章
相關標籤/搜索