移動版網頁以及Web App的那些meta們

現在智能機遍及大街小巷，過年回家（農村的），村裏人盡然也在討論搶不上小米的事情，看來，移動時代已經來臨，並且很飛速，因此，現在的前端攻城師們要大 跨步的邁向移動互聯網了，更況且Web App也應用普遍，可能原理還同樣，可是必定會有新的東西出現，那就從「頭」開始，看看頭部那些Meta的新玩意。

一、

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

這是一個移動端最經常使用的meta，定義頁面的縮放，如上表明寬度以終端寬度爲準，而且不容許用戶縮放，更多屬性以下：
width  -- 寬度（範圍從200到10,000，默認爲980像素/device-width縮放至終端寬度）
height  -- 高度（範圍從223到10,000）
initial-scale  -- 初始的縮放比例 （範圍從 > 0 到 10）
minimum-scale  -- 容許用戶縮放到的最小比例
maximum-scale  -- 容許用戶縮放到的最大比例
user-scalable  --  用戶是否能夠手動縮放 (no，yes)
target-densitydpi  --  dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi 定義爲每英寸點的數量（dpi）

二、

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

禁止把數字轉化爲撥號連接

三、

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

禁止把郵箱地址做爲郵件發送

四、

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

隱藏瀏覽器的工具欄和菜單欄，看到apple了吧，對iso系統起用

五、

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

默 認值爲 default（白色），能夠定爲black（黑色）和black-translucent（灰色半透明），須要說明的是值爲「black- translucent」將會佔據頁面位置，浮在頁面上方（會覆蓋頁面 20px高度 iphone4和itouch4的Retina屏幕爲40px）

六、

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

"添加到主屏幕「後，全屏顯示

介於說到了「頭」，也說到了Web App，那就捎帶說說兩個蘋果私有link，

一、

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

這個 link 就是設置 Web App 的放置主屏幕上 icon 文件路徑，href就是你ico的文件路徑，sizes能夠根據不一樣分辨率，對應不一樣的圖片，尺寸以下:

IOS設備	最適尺寸(px)
iPhone 和 iTouch	57 x 57
retina iPhone 和 retina iTouch	114 x 114
iPad	72 x 72
retina iPad	144 x 144

若是沒有指明 <sizes> 屬性的大小，則默認值爲57×57。
如 果全部的 <link> 標籤序列中都沒有符合官方推薦的最適尺寸的話，那麼IOS會從全部比推薦的最適尺寸大的圖標中選擇尺寸最小的那一個，若是全部的 <link> 標籤序列中的圖標都比當前推薦的最適尺寸小的話，IOS會從這些圖片中自動選擇最大的那個來做爲啓動圖標。
若是整個頁面都沒有指定任何的 apple-touch-icon 的圖標的話，IOS則會自動去網站根目錄尋找有 apple-touch-icon 和 apple-touch-icon-precomposed 前綴的圖標文件。

二、

<link rel="apple-touch-startup-image" href="logo_startup.png" media="(device-width: 320px)" />

這個 link 就是設置啓動時候的界面，可用媒體查詢調用不一樣圖片

Web App 纔剛剛開始---