手機頁面中的meta標籤

 

之前看書的時候，以爲meta標籤就只有一個charset對於我來講是有用的。前段時間有個學弟讓我寫個手機版的網頁，我才知道原來meta標籤有那麼多學問。

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

meta標籤的做用有：搜索引擎優化（SEO），定義頁面使用語言，自動刷新並指向新的頁面，實現網頁轉換時的動態效果，控制頁面緩衝，網頁定級評價，控制網頁顯示的窗口等

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

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

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

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

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

3，<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）。

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

告訴設備忽略將頁面中的數字識別爲電話號碼。

{下面是在寫App時經常會用到的一些meta總結:}

 1 #手機頁面重要meta
 2 
 3 > 設置寬度爲設備的寬度，默認不縮放，不容許用戶縮放（即禁止縮放），在網頁加載時隱藏地址欄與導航欄
 4     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
 5 
 6 > 禁止識別手機號碼
 7     <meta name="format-detection" content="telephone=no" />
 8 
 9 > 關閉識別手機號碼後若要識別某一個手機號
10     <a href="tel:13800138000">13800138000</a>
11 
12 > 禁止識別郵箱
13     <meta content="email=no" name="format-detection" />
14 
15 > 是否啓動webapp功能，會刪除默認的蘋果工具欄和菜單欄。
16     <meta name="apple-mobile-web-app-capable" content="yes" />
17 
18 > 當啓動webapp功能時，顯示手機信號、時間、電池的頂部導航欄的顏色。默認值爲default（白色），能夠定爲black（黑色）和black-translucent（灰色半透明）。
19     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
20 
21 > 用戶把網頁存爲書籤時，在手機HOME界面建立應用程序樣式的圖標。
22     <link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
23     <link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" />
24 
25 > webapp添加啓動動畫
26     <link rel="apple-touch-startup-image" href="startup.png" />
27 
28 > 其餘模式
29     <!-- uc強制豎屏 -->
30     <meta name="screen-orientation" content="portrait">
31     <!-- QQ強制豎屏 -->
32     <meta name="x5-orientation" content="portrait">
33     <!-- UC強制全屏 -->
34     <meta name="full-screen" content="yes">
35     <!-- QQ強制全屏 -->
36     <meta name="x5-fullscreen" content="true">
37     <!-- UC應用模式 -->
38     <meta name="browsermode" content="application">
39     <!-- QQ應用模式 -->
40     <meta name="x5-page-mode" content="app">
41     <!-- 360 Webkit -->
42     <meta name="renderer" content="webkit">

還有五個大型網站手機觸屏版的頁面使用meta的實例，咱們在剛開始接觸的時候能夠借鑑和學習。

1、天貓

<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、淘寶

<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、京東

<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、網易

<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、百度

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