前言

本文旨在記錄本人涉足移動(dòng)webApp開發(fā)的幾點(diǎn)體會(huì)，歡迎分享與指正。

再見，IE678

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

HTML5/CSS3

HTML5/CSS3在移動(dòng)設(shè)備上已經(jīng)非常普及了，再也不用考慮以前在桌面設(shè)備上是否有舊版本瀏覽器的問(wèn)題了。HTML5的跨平臺(tái)、便于維護(hù)、開發(fā)成本低，各種優(yōu)點(diǎn)使得其在移動(dòng)設(shè)備上應(yīng)用非常廣。phonegap等混合框架的出現(xiàn)也彌補(bǔ)了webapp的缺點(diǎn)，前景非常遼闊。

viewport

開發(fā)web頁(yè)面時(shí)的一個(gè)基礎(chǔ)meta屬性

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

讓頁(yè)面的寬度與設(shè)備寬度一致，并且禁止縮放，如此一來(lái)大大減少了web開發(fā)的設(shè)計(jì)成本，并且讓web頁(yè)面顯示的效果適當(dāng)。

模擬器

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

devicePixelRatio

這個(gè)是設(shè)計(jì)webApp頁(yè)面時(shí)一個(gè)重要的參數(shù)，定義如下

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

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

這款手機(jī)橫向物理像素有720，縱向物理像素有1280，但由于devicePixelRatio=2，也就是說(shuō)橫縱各用兩個(gè)像素來(lái)表示原來(lái)一個(gè)像素的內(nèi)容，整塊屏幕就是用四個(gè)物理像素來(lái)表示一個(gè)像素的內(nèi)容，這是為了讓圖像顯示更加逼真。對(duì)于開發(fā)者而言，我們要填充的是內(nèi)容，故要把橫向?qū)挾榷?CODE>720px/2=360px，縱向定為640px，開發(fā)起來(lái)的頁(yè)面才在此設(shè)備上顯示正常。

hover & touch

不再有hover了，并且開始關(guān)注touch。這點(diǎn)開發(fā)經(jīng)驗(yàn)還少，以后再補(bǔ)充。