Mobile開發之meta篇 Mobile開發之meta篇

時間 2019-12-10

標籤 mobile 開發 meta 欄目無線简体版

原文原文鏈接

Mobile開發之meta篇

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

　　width: viewport 的寬度（範圍從 200 到 10,000 ，默認爲 980 像素）
　　height: viewport 的高度（範圍從 223 到 10,000 ）
　　initial-scale: 初始的縮放比例（範圍從>0到 10 ）
　　minimum-scale: 容許用戶縮放到的最小比例
　　maximum-scale: 容許用戶縮放到的最大比例
　　user-scalable: 用戶是否能夠手動縮放html

<meta name="apple-mobile-web-app-capable" content="yes" />

　　是否刪除默認的蘋果工具欄和菜單欄ios

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

　　當設置了app形式以後，做用是控制狀態欄顯示樣式，可是本機ios7測試以後沒啥改變……不解web

<meta name="format-detection"content="telephone=no, email=no" />

　　iphone會把一串數字識別爲電話號碼，點擊的時候會提示是否呼叫，屏蔽這功能則把telephone設置爲no，
要啓用電話功能，請使用<a href="tel:13888888888">Call Me : 13888888888</a>來代替，
郵件則爲<a href="mailto:someone@microsoft.com?subject=Hello%20again">發送郵件</a>windows

其餘的meta設置

<!-- 啓用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">

　　此外，apple還有兩個有趣的標籤：瀏覽器

　　1. apple-touch-iconapp

　　<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">iphone

　　若是apple-mobile-web-app-capable設置爲yes了，那麼在蘋果機的safari上能夠經過添加到主屏按鈕將網站添加到主屏幕上。而設置相應apple-touch-icon標籤，則添加到主屏上的圖標就會使用咱們指定的圖片。工具

　　2. apple-touch-startup-imagepost

　　<link rel="apple-touch-startup-image" href="/startup.png">測試

　　基於apple-mobile-web-app-capable設置爲yes，能夠爲WebApp設置一個相似NativeApp的啓動畫面。和apple-touch-icon不一樣，apple-mobile-web-app-capable不支持sizes屬性，要使用media來加載不一樣的啓動畫面。詳細查詢大漠的文章。

// iPhone
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" /> // iPhone Retina <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

　　因此，對於移動端，把通用的起始模板寫成sublime的snippet：

<snippet> <content><![CDATA[ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection"content="telephone=no, email=no" /> <title>${1}</title> </head> <body> ${2} </body> </html> ]]></content> <tabTrigger>mhd</tabTrigger> <description>Mobile Frame</description> <scope>text.html</scope> </snippet>

參考：

　　http://www.w3cplus.com/mobile/mobile-terminal-refactoring-create-page.html

　　http://blog.sina.com.cn/s/blog_6d48e77101015kqr.html

　　http://blog.sina.com.cn/s/blog_3f1fc8950101fz2v.html

相關標籤/搜索