html5手機網站需要加的那些meta标簽，手機網站自适應

 此篇筆記從以下幾篇博文歸納總結而來：

1，html5手機網站需要加的那些meta标簽，手機網站自适應

2， 手機網頁meta 設定

3，移動終端H5頁面meta标簽的設定案例

a、<!-- 強制讓文檔與裝置的寬度保持1：1 -->

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

這個meta标簽表示：網頁寬度預設等于螢幕寬度（width=device-width），初始縮放比例（initial-scale=1）為1.0，即網頁初始大小占螢幕面積的100%。

強制讓文檔的寬度與裝置的寬度保持:，并且文檔最大的寬度比例是，且不允許使用者點選螢幕放大浏覽；

width- viewport的寬度 height- viewport的高度

initial-scale- 初始的縮放比例

minimum-scale- 允許使用者縮放到的最小比例

maximum-scale- 允許使用者縮放到的最大比例

user-scalable- 使用者是否可以手動縮放

b、<!-- 删除預設的蘋果工具欄和菜單欄 -->

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

這個meta标簽是iphone裝置中的safari私有meta标簽，它表示：允許全屏模式浏覽；這meta的作用就是删除預設的蘋果工具欄和菜單欄。content有兩個值”yes”和”no”,當我們需要顯示工具欄和菜單欄時，這個行meta就不用加了，預設就是顯示。

c、<!-- 在web app應用下狀态條（螢幕頂部條）的顔色 -->

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

說明：

• 這個meta标簽也是iphone的私有标簽，它指定的iphone中safari頂端的狀态條的樣式；
• 預設值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）；

注意：若值為“black-translucent”将會占據頁面px位置，浮在頁面上方（會覆寫頁面px高度–iphone4和itouch4的Retina螢幕為px）。

d、<!-- 是否識别 手機号碼、電子郵件、位址等 -->

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

當該 HTML 頁面在手機上浏覽時，該标簽用于指定是否将頁面中的文本内容識别為手機号碼、電子郵件、位址等。

e、<!-- 浏覽網站時的小圖示 -->

    <link rel="shortcut icon" href="http://p.www.xiaomi.com/favicon.ico" target="_blank" rel="external nofollow" type="/image/x-icon">  

f、<!-- 添加至主屏時的圖檔 -->

    <link rel="apple-touch-icon-precomposed" href="http://a.tbcdn.cn/mw/s/hi/tbtouch/images/touch-icon.png" target="_blank" rel="external nofollow" >

說明：這樣就能在使用者把網頁存為書簽時，在手機HOME界面建立應用程式樣式的圖示。這個link就是設定web app的放置主螢幕上icon檔案路徑。

使用：

• 該路徑需要注意的就是放到将網站的文檔根目錄下但不是伺服器的文檔的根目錄。
• 圖檔尺寸可以設定為57*57（px）或者Retina可以定為114*114（px），ipad尺寸為72*72（px）
• iOS用rel="apple-touch-icon",Android 用rel="apple-touch-icon-precomposed"

g、<!-- 設定啟動時候的界面 -->

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

說明：這個link就是設定啟動時候的界面，放置的路勁和上面類似。

使用：

• 該路徑需要注意的就是放到将網站的文檔根目錄下但不是伺服器的文檔的根目錄。
• 官方規定啟動界面的尺寸必須為 320*640（px），原本以為Retina螢幕可以支援雙倍，但是不支援，圖檔顯示不出來。

h、<!-- 設定在apple上以應用模式啟動時，是否全屏 -->

<meta name="apple-touch-fullscreen" content="yes">"

==================

    還有一種有趣的方法

    建立html5時發現這麼一句話，如下：

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>

    這樣寫可以達到的效果是如果安裝了GCF（Google Chrome Frame 谷歌内嵌浏覽器架構的簡稱），則使用GCF來渲染頁面，如果沒安裝GCF，則使用最高版本的IE核心進行渲染。這個插件可以讓使用者的IE浏覽器外不變，但使用者在浏覽網頁時，實際上使用的是Google Chrome浏覽器核心，而且支援IE6、7、8等多個版本的IE浏覽器。

如下：

<!-- 适應移動端start -->
    <!-- width viewport 寬度(數值/device-width)
        height viewport 高度(數值/device-height)
        initial-scale 初始縮放比例
        maximum-scale 最大縮放比例
        minimum-scale 最小縮放比例
        user-scalable 是否允許使用者縮放(yes/no)
        minimal-ui iOS 7.1 beta 2 中新增屬性，在頁面加載時最小化上下狀态欄
     -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <!-- 删除蘋果預設的工具欄和菜單欄 -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 設定蘋果工具欄顔色 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 忽略頁面中的數字識别為電話，忽略email識别 -->
    <meta name="format-detection" content="telphone=no, email=no" />
    <!-- 啟用360浏覽器的極速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用相容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 針對手持裝置優化，主要是針對一些老的不識别viewport的浏覽器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微軟的老式浏覽器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc強制豎屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ強制豎屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC強制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ強制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC應用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ應用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 點選無高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- 适應移動端end -->