現在智能機遍及大街小巷,過年回家(農村的),村裏人盡然也在討論搶不上小米的事情,看來,移動時代已經來臨,並且很飛速,因此,現在的前端攻城師們要大 跨步的邁向移動互聯網了,更況且Web App也應用普遍,可能原理還同樣,可是必定會有新的東西出現,那就從「頭」開始,看看頭部那些Meta的新玩意。前端
一、web
<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" />
禁止把數字轉化爲撥號連接
三、app
<meta content="email=no" name="format-detection" />
禁止把郵箱地址做爲郵件發送
四、iphone
<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,spa
一、scala
<link rel="apple-touch-icon-precomposed" href="iphone_logo.png" sizes="72x72" />
這個 link 就是設置 Web App 的放置主屏幕上 icon 文件路徑,href就是你ico的文件路徑,sizes能夠根據不一樣分辨率,對應不一樣的圖片,尺寸以下:code
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 纔剛剛開始---