手機頁面中的meta標簽 - hsprout－IT工程師數位筆記本

文章出處

以前看書的時候，覺得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">