移動前端webApp開發點滴積累20140524

#webApp開發幾點體會（移動前端）


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


##再見，IE678
移動設備，Android跟iPhone是主流，即便是win8設備，自帶的都IE9以上，再也見不到那個不按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的模擬器中很快地找到這個設備

![Samsung GALAXY Note 2](https://images0.cnblogs.com/i/84053/201405/242050294347837.jpg)

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


##hover & touch
再也不有hover了，而且開始關注touch。這點開發經驗還少，之後再補充。