前言

本文旨在記錄本人涉足移動webApp開發的幾點體會，歡迎分享與指正。

再見，IE678

移動設備，Android跟iphone是主流，即使是win8設備，自帶的都IE10以上，再也見不到那個不按W3c套路解釋的瀏覽器了，很多兼容性問題都可以放下，專心處理業務了。

HTML5/CSS3

HTML5/CSS3在移動設備上已經非常普及了，再也不用考慮以前在桌面設備上是否有舊版本瀏覽器的問題了。HTML5的跨平臺、便于維護、開發成本低，各種優點使得其在移動設備上應用非常廣。phonegap等混合框架的出現也彌補了webapp的缺點，前景非常遼闊。

viewport

開發web頁面時的一個基礎meta屬性

    <meta content="width=device-width,initial-scale=1.0" name="viewport">

讓頁面的寬度與設備寬度一致，并且禁止縮放，如此一來大大減少了web開發的設計成本，并且讓web頁面顯示的效果適當。

模擬器

Chrome的模擬器（Emulation）真是開發利器，先在桌面上完成大部分的開發與初步的測試，再在專門的設備上測試。

devicePixelRatio

這個是設計webApp頁面時一個重要的參數，定義如下

    window.devicePixelRatio是設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例。    公式表示就是：window.devicePixelRatio = 物理像素 / dips

以Samsung GALAXY Note 2為例，我們可以在chrome的模擬器中很快地找到這個設備

這款手機橫向物理像素有720，縱向物理像素有1280，但由于devicePixelRatio=2，也就是說橫縱各用兩個像素來表示原來一個像素的內容，整塊屏幕就是用四個物理像素來表示一個像素的內容，這是為了讓圖像顯示更加逼真。對于開發者而言，我們要填充的是內容，故要把橫向寬度定為720px/2=360px，縱向定為640px，開發起來的頁面才在此設備上顯示正常。

hover & touch

不再有hover了，并且開始關注touch。這點開發經驗還少，以后再補充。