手機端的META差別

手機端的META你瞭解多少？

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

接下來咱們來看看各大網站手機端的meta標籤：
1、天貓

1. <title>天貓觸屏版</title>
2. <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
3. <meta charset="utf-8">
4. <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
5. <meta content="yes" name="apple-mobile-web-app-capable">
6. <meta content="black" name="apple-mobile-web-app-status-bar-style">
7. <meta content="telephone=no" name="format-detection">

2、淘寶

1. <title>淘寶網觸屏版</title>
2. <meta charset="utf-8">
3. <meta content="yes" name="apple-mobile-web-app-capable">
4. <meta content="yes" name="apple-touch-fullscreen">
5. <meta content="telephone=no" name="format-detection">
6. <meta content="black" name="apple-mobile-web-app-status-bar-style">
7. <meta property="wb:webmaster" content="c51923015ca19eb1">
8. <meta name="author" content="m.taobao.com">
9. <meta name="copyright" content="Copyright ©m.taobao.com 版權全部">
10. <meta name="revisit-after" content="1 days">
11. <meta name="keywords" content="">
12. <meta name="description" content="">

3、京東

1. <title> 京東 - 手機版 </title>
2. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
3. <meta name="format-detection" content="telephone=no">
4. <meta name="Keywords" content="手機購物,WAP商城,日用百貨,3C家電,汽車用品"><meta name="description" content="京東手機版提供了包括數碼、家電、手機、電腦配件、網絡產品、日用百貨等數萬種商品，手機快捷購物，就上京東手機版。">

4、網易

1. <title>手機網易網</title>
2. <meta charset="UTF-8">
3. <meta content="width=device-width,user-scalable=no" name="viewport">
4. <meta name="apple-itunes-app" content="app-id=425349261">
5. <meta name="apple-mobile-web-app-capable" content="yes">

5、百度

1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
2. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
3. <meta name="format-detection" content="telephone=no">

手機端特有的有哪些？

1. <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
2. <meta content="yes" name="apple-mobile-web-app-capable">
3. <meta content="black" name="apple-mobile-web-app-status-bar-style">
4. <meta content="telephone=no" name="format-detection">

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

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

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

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

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

轉載請註明：玩賺樂 » 學習手機端的META差別，打造本身的移動網頁