移動端meta彙總

part1

1、天貓(http://m.tmall.com)

<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">    

2、淘寶(http://m.taobao.com)

<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="">

3、京東(http://m.jd.com)

<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="京東手機版提供了包括數碼、家電、手機、電腦配件、網絡產品、日用百貨等數萬種商品，手機快捷購物，就上京東手機版。">  

4、網易(http://3g.163.com)

<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">

5、百度(http://m.baidu.com)

<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">

 

meta指元素可提供有關頁面的元信息（meta-information），好比針對搜索引擎和更新頻度的描述和關鍵詞。 標籤位於文檔的頭部，不包含任何內容。 標籤的屬性定義了與文檔相關聯的名稱/值對。

手機端特有的有哪些？

<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"> 

第一個meta標籤表示：強制讓文檔的寬度與設備的寬度保持1:1，而且文檔最大的寬度比例是1.0，且不容許用戶點擊屏幕放大瀏覽；

width - viewport的寬度 height - viewport的高度   
initial-scale - 初始的縮放比例  
minimum-scale - 容許用戶縮放到的最小比例   
maximum-scale - 容許用戶縮放到的最大比例  
user-scalable - 用戶是否能夠手動縮放

 

第二個meta標籤是iphone設備中的safari私有meta標籤，它表示：容許全屏模式瀏覽；
第三個meta標籤也是iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式；

在web app應用下狀態條（屏幕頂部條）的顏色；
默認值爲default（白色），能夠定爲black（黑色）和black-translucent（灰色半透明）。
注意：若值爲「black-translucent」將會佔據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕爲40px）。 

第四個meta標籤表示：告訴設備忽略將頁面中的數字識別爲電話號碼。


參考：
一、百度百科meta

二、手機網站前端設計

三、手機網頁製做的認識（有關meta標籤）

四、手機端的一些標準  

五、HTML <meta> 標籤

轉自http://www.cnblogs.com/kuikui/p/3590673.html

 

part2

移動平臺對 META 標籤的定義

下面介紹一些有關標記的例子及解釋。

1、meta 標籤分兩大部分：HTTP 標題信息（http-equiv）和頁面描述信息（name）。

一、http-equiv 屬性的 Content-Type 值（顯示字符集的設定）

說明：設定頁面使用的字符集，用以說明主頁製做所使用的文字語言，瀏覽器會根據此來調用相應的字符集顯示 page 內容。

用法：

1	< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />

注意：該 meta 標籤訂義了 HTML 頁面所使用的字符集爲 utf-8 ，就是萬國碼。它能夠在同一頁面顯示中文簡體、繁體及其它語言（如日文，韓文）等。

二、name 屬性的 viewport 值（移動屏幕的縮放）

也就是可視區域。對於桌面瀏覽器，咱們都很清楚 viewport 是什麼，就是除去了全部工具欄、狀態欄、滾動條等等以後用於看網頁的區域，這是真正有效的區域。因爲移動設備屏幕寬度不一樣於傳統 web，所以咱們須要改變 viewport 值。

實際上咱們能夠操做的屬性有 4 個：

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

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

說明：

• 強制讓文檔與設備的寬度保持 1:1 ；
• 文檔最大的寬度比列是1.0（ initial-scale 初始刻度值和 maximum-scale 最大刻度值）；
• user-scalable 定義用戶是否能夠手動縮放（ no 爲不縮放），使頁面固定設備上面的大小；

注意：實際測試中發現，有些安卓系統自帶的瀏覽器並不支持這一條規則，可以對頁面進行放大，一旦放大響應的 box 也隨之放大，致使頁面出現錯亂問題，解決方法：定義頁面的最小寬度

1 2 3

body {      min-width : 320px ; }

三、name 屬性的 format-detection 值（忽略頁面中的數字識別爲電話號碼）

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

說明：

• 使設備瀏覽網頁時對數字不啓用電話功能（不一樣設備解釋不一樣，iTouch 點擊數字爲存入聯繫人，iPhone 爲撥打電話），忽略將頁面中的數字識別爲電話號碼。
• 若須要啓用電話功能將 telephone=yes 便可，若在頁面上面有 Google Maps, iTunes 和 YouTube 的連接會在ios設備上打開相應的程序組件。

四、name 屬性的 apple-mobile-web-app-capable 值（網站開啓對 web app 程序的支持）

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

說明：

• 網站開啓對 web app 程序的支持。
• 該 meta 能夠看出內容爲「蘋果設備 web 應用程序 xx」，就是說該 meta 是專門定義 web 應用的。

五、name 屬性的 apple-mobile-web-app-status-bar-style 值（改變頂部狀態條的顏色）

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

說明：

• 在 web app 應用下狀態條（屏幕頂部條）的顏色；
• 默認值爲 default（白色），能夠定爲 black（黑色）和 black-translucent（灰色半透明）；

注意：若值爲「black-translucent」將會佔據頁面位置，浮在頁面上方（會覆蓋頁面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕爲 40px ）。

六、name 屬性設置做者姓名及聯繫方式

1	< meta name = "author" contect = "liudanyun, liudy102@163.com" />

2、蘋果 Web App 其餘設置：

固然，配合 Web App 的 icon 和啓動界面須要額外的兩端代碼進行設定，以下所示：

1	< link rel = "apple-touch-icon-precomposed" href = "iphone_logo.png" />

說明：這個 link 就是設置 Web App 的放置主屏幕上 icon 文件路徑（圖片四）。

使用：

• 該路徑須要注意的就是放到將網站的文檔根目錄下但不是服務器的文檔的根目錄。
• 圖片尺寸能夠設定爲 57*57（px）或者 Retina 能夠定爲 114*114（px），iPad 尺寸爲 72*72（px）

1	< link rel = "apple-touch-startup-image" href = "logo_startup.png" />

說明：這個 link 就是設置啓動時候的界面。

使用：

• 放置的路徑和上面同樣。
• 官方規定啓動界面的尺寸必須爲 320*640（px），本來覺得 Retina 屏幕能夠支持雙倍，可是不支持，圖片顯示不出來。

若是對 Web App 的這兩個 meta 還有不能詳細理解的能夠查看官方解釋：Meta Tags

關於 link 方面還有更多的參數設置（例如：iPod、iPad、iPhone 不一樣尺寸不一樣圖標），能夠查看官方標準文檔：Configuring Web Applications

近日以來一直在看JQuery Mobile 一個手機開發框架，說實話真的很頭疼的~~~~ 由於裏面有不少的屬性、方法和事件~~~

轉自 http://www.cssue.com/xhtml-css/html5-css3/mobile-meta.html

 

part3

下面是手機網頁的一些認識：

    1、<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">

    網頁手機wap2.0網頁的head里加入下面這條元標籤，在iPhone的瀏覽器中頁面將以原始大小顯示，並不容許縮放。  
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">   
width - viewport的寬度 height - viewport的高度   
initial-scale - 初始的縮放比例  
minimum-scale - 容許用戶縮放到的最小比例   
maximum-scale - 容許用戶縮放到的最大比例  
user-scalable - 用戶是否能夠手動縮放 

2、<meta name="format-detection" content="telephone=no">

當該 HTML 頁面在手機上瀏覽時，該標籤用於指定是否將網頁內容中的手機號碼顯示爲撥號的超連接。

在 iPhone 上默認值是：

<meta name="format-detection" content="telephone=yes"/>

若是你不但願手機自動將網頁中的電話號碼顯示爲撥號的超連接，那麼能夠這樣寫：

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

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

說明：網站開啓對web app程序的支持。

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

說明：

• 在web app應用下狀態條（屏幕頂部條）的顏色；
• 默認值爲default（白色），能夠定爲black（黑色）和black-translucent（灰色半透明）。

注意：若值爲「black-translucent」將會佔據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕爲40px）。

 ！！！！蘋果web app其餘設置：

固然，配合web app的icon 和 啓動界面須要額外的兩端代碼進行設定，以下所示：

<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />

說明：這個link就是設置web app的放置主屏幕上icon文件路徑

使用：

• 該路徑須要注意的就是放到將網站的文檔根目錄下但不是服務器的文檔的根目錄。
• 圖片尺寸能夠設定爲57*57（px）或者Retina能夠定爲114*114（px），ipad尺寸爲72*72（px）

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

說明：這個link就是設置啓動時候的界面（圖片五），放置的路勁和上面相似。

使用：

• 該路徑須要注意的就是放到將網站的文檔根目錄下但不是服務器的文檔的根目錄。
• 官方規定啓動界面的尺寸必須爲 320*640（px），本來覺得Retina屏幕能夠支持雙倍，可是不支持，圖片顯示不出來。

5、<meta name="apple-touch-fullscreen" content="yes">"添加到主屏幕「後，全屏顯示<meta name="apple-mobile-web-app-capable" content="yes" />
這meta的做用就是刪除默認的蘋果工具欄和菜單欄。content有兩個值」yes」和」no」,當咱們須要顯示工具欄和菜單欄時，這個行meta就不用加了，默認就是顯示。
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />//將不識別郵箱
告訴設備忽略將頁面中的數字識別爲電話號碼 
iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。這樣就能在用戶把網頁存爲書籤時，在手機HOME界面建立應用程序樣式的圖標。

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

----------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<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">
<meta name="keywords" content="">

----------------------------------------------------------------------------------------------------------------------------

 

<meta name="apple-mobile-web-app-capable" content="yes">  
<meta name="apple-mobile-web-app-status-bar-style" content="black" />  
<meta http-equiv="content-type" content="text/html; charset=gb2312">  
<meta name="HandheldFriendly" content="True">  
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no">  
<meta name="apple-touch-fullscreen" content="YES" />  
<meta name="viewport" content="width=device-width,maximum-scale=1.0,initial-scale=1.0,user-scalable=no"/>  
<meta name="format-detection" content="telephone=no"/>

 

轉自http://blog.163.com/yin_1989/blog/static/1749132082013071924352/