近來想寫一些好玩的手機網頁,在這裏整理了一下在手機端的meta標籤,以避免下次忘記,再去網上搜。html
meta指元素可提供有關頁面的元信息(meta-information),好比針對搜索引擎和更新頻度的描述和關鍵詞。 標籤位於文檔的頭部,不包含任何內容。 標籤的屬性定義了與文檔相關聯的名稱/值對。android
meta標籤的做用有:搜索引擎優化(SEO),定義頁面使用語言,自動刷新並指向新的頁面,實現網頁轉換時的動態效果,控制頁面緩衝,網頁定級評價,控制網頁顯示的窗口等web
下面是手機網頁的一些meta:服務器
1,<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" >網絡
該標籤用於強制讓文檔的寬度與設備的寬度保持1:1,而且文檔最大的寬度比例是1.0,且不容許用戶點擊屏幕放大瀏覽;app
2,<meta name="format-detection" content="telephone=no,email=no">iphone
該標籤用於禁止識別手機號碼和郵箱。工具
3,<meta name="apple-mobile-web-app-capable" content="yes" >優化
該標籤是iphone設備中的safari私有meta標籤,它表示:刪除默認的蘋果工具欄和菜單欄。content有兩個值」yes」和」no」,當咱們須要顯示工具欄和菜單欄時,這個行meta就不用加了,默認就是顯示。網站開啓對web app程序的支持。網站
4,<meta name="apple-mobile-web-app-status-bar-style" content="black" >
改標籤也是iphone的私有標籤,它指定的iphone中safari頂端的狀態條的樣式;
注意:若值爲「black-translucent」將會佔據頁面px位置,浮在頁面上方(會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕爲40px)。
5,<meta name="apple-touch-fullscreen" content="yes">
該標籤是safari私有meta標籤,它表示:容許全屏模式瀏覽;
蘋果web app其餘設置:
固然,配合web app的icon 和 啓動界面須要額外的兩端代碼進行設定,以下所示:
<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />
iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。這樣就能在用戶把網頁存爲書籤時,在手機HOME界面建立應用程序樣式的圖標。
說明:這個link就是設置web app的放置主屏幕上icon文件路徑
使用:
<link rel="apple-touch-startup-image" href=milanoo_startup.png" />
說明:這個link就是設置啓動時候的界面(圖片五),放置的路勁和上面相似。
使用:
其餘模式:
大型網站實例:
<title>天貓觸屏版</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<title>淘寶網觸屏版</title>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no" name="format-detection">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta property="wb:webmaster" content="c51923015ca19eb1">
<meta name="author" content="m.taobao.com">
<meta name="copyright" content="Copyright ©m.taobao.com 版權全部">
<meta name="revisit-after" content="1 days">
<meta name="keywords" content="">
<meta name="description" content="">
<title> 京東 - 手機版 </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<meta name="format-detection" content="telephone=no">
<meta name="Keywords" content="手機購物,WAP商城,日用百貨,3C家電,汽車用品">
<meta name="description" content="京東手機版提供了包括數碼、家電、手機、電腦配件、網絡產品、日用百貨等數萬種商品,手機快捷購物,就上京東手機版。">
<title>手機網易網</title>
<meta charset="UTF-8">
<meta content="width=device-width,user-scalable=no" name="viewport">
<meta name="apple-itunes-app" content="app-id=425349261">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">