移動前端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的模擬器中很快地找到這個設備  這款手機橫向物理像素有720，縱向物理像素有1280，但由於devicePixelRatio=2，也就是說橫縱各用兩個像素來表示原來一個像素的內容，整塊屏幕就是用四個物理像素來表示一個像素的內容，這是為了讓圖像顯示更加逼真。對於開發者而言，我們要填充的是內容，故要把橫向寬度定為`720px/2=360px`，縱向定為`640px`，開發起來的頁面才在此設備上顯示正常。 ##hover & touch 不再有hover了，並且開始關注touch。這點開發經驗還少，以后再補充。