HTML5移動開發中的meta與link

meta

HTML5移動開發中的一些webkit專屬頭部標籤，可以幫助瀏覽器更好的解析HTML代碼，從而爲HTML5移動開發提供更好的前端表現與體驗

 

viewport網頁縮放

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

UTF-8編碼

<meta charset="utf-8" />

SEO搜索引擎相關設置

<!-- 做者 -->
<meta name="author" contect="..." />
<!-- 關鍵詞 -->
<meta name="keywords" content="..." />
<!-- 描述 -->
<meta name="description" content="..." />
<!-- 抓取 -->
<meta name="robots" content="..." />

iOS系統相關設置

<!-- 禁用自動識別電話號碼 -->
<meta name="format-detection" content="telephone=no" />
<!-- 禁用自動識別電子郵件 -->
<meta name="format-detection" content="email=no" />

Safari瀏覽器相關設置

<!-- 強制全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 設置狀態欄顏色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 設置添加至主屏標題 -->
<meta name="apple-mobile-web-app-title" content="..." />

UC瀏覽器相關設置

<!-- 強制豎屏 -->
<meta name="screen-orientation" content="portrait" />
<!-- 強制全屏 -->
<meta name="full-screen" content="yes" />
<!-- 應用模式 -->
<meta name="browsermode" content="application" />

QQ瀏覽器相關設置

<!-- 強制豎屏 -->
<meta name="x5-orientation" content="portrait" />
<!-- 強制全屏 -->
<meta name="x5-fullscreen" content="true" />
<!-- 應用模式 -->
<meta name="x5-page-mode" content="app" />

360瀏覽器相關設置

<!-- 啓用極速模式 -->
<meta name="renderer" content="webkit" />

WP手機相關設置

<!-- 禁用點擊高光效果 -->
<meta name="msapplication-tap-highlight" content="no" />

Weibo社交標籤相關設置

<!-- 展現標題 -->
<meta property="og:title" content="..." />
<!-- 展現描述 -->
<meta property="og:description" content="..." />
<!-- 展現類型 -->
<meta property="og:type" content="..." />
<!-- 展現圖片 -->
<meta property="og:image" content="..." />
<!-- 展現連接 -->
<meta property="og:url" content="..." />

 

link

讓你的WebAPP看上去更像NativeAPP，帶來不同的用戶體驗

RSS訂閱

<link rel="alternate" type="application/rss+xml" href="rss.xml" title="RSS" />

主屏圖標相關設置

<!-- Favicons -->
<link rel="shortcut icon" type="image/ico" href="../images/favicon.ico" />
<!-- Android -->
<link rel="icon" sizes="196x196" href="../images/icon-196x196.png" />
<!-- iPhone、iTouch -->
<link rel="apple-touch-icon-precomposed" href="../images/icon-57x57.png" />
<!-- Retina iPhone、Retina iTouch -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../images/icon-114x114.png" />
<!-- Retina iPad -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../images/icon-144x144.png" />

iOS啓動動畫相關設置

<!-- iPhone、iPod Touch豎屏 -->
<link rel="apple-touch-startup-image" href="../images/icon-320x480.png" />
<!-- Retina iPhone、Retina iPod Touch豎屏 -->
<link rel="apple-touch-startup-image" sizes="640x960" href="../images/icon-640x960.png" />
<!-- Retina iPhone 五、Retina iPod Touch 5豎屏 -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="../images/icon-640x1136.png" />
<!-- iPad豎屏 -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="../images/icon-768x1004.png" />
<!-- iPad橫屏 -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="../images/icon-1024x748.png" />
<!-- Retina iPad豎屏 -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="../images/icon-1536x2008.png" />
<!-- Retina iPad橫屏 -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="../images/icon-2048x1496.png" />

 

關於meta與link的設置項其實還有很多，因爲太過冷門，就不一一列舉了