歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

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 5、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的設置項其實還有不少,由於太過冷門,就不一一列舉了

HTML5新增的標簽和廢除的標簽  http://www.linuxidc.com/Linux/2016-01/127516.htm

40 個重要的 HTML5 面試題及答案   http://www.linuxidc.com/Linux/2015-12/126824.htm

HTML5與CSS3基礎教程(第8版)中文高清版 PDF  http://www.linuxidc.com/Linux/2015-12/125734.htm

HTML5 地理位置定位(HTML5 Geolocation)原理及應用 http://www.linuxidc.com/Linux/2012-07/65129.htm 

HTML5移動開發即學即用(雙色) PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90351.htm 

HTML5入門學習筆記 http://www.linuxidc.com/Linux/2013-09/90089.htm 

HTML5移動Web開發筆記 http://www.linuxidc.com/Linux/2013-09/90088.htm 

HTML5 開發中的本地存儲的安全風險 http://www.linuxidc.com/Linux/2013-06/86486.htm 

《HTML5與CSS3權威指南》及相配套源碼 http://www.linuxidc.com/Linux/2013-02/79950.htm 

關於 HTML5 令人激動的 10 項預測 http://www.linuxidc.com/Linux/2013-02/79917.htm 

HTML5與CSS3實戰指南 PDF http://www.linuxidc.com/Linux/2013-02/79910.htm 

Copyright © Linux教程網 All Rights Reserved