DIV CSS 佈局教程網

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

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

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

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

<meta content="width=device-width,initial-scale=1.0" name="viewport">
讓頁面的寬度與設備寬度一致，並且禁止縮放，如此一來大大減少了web開發的設計成本，並且讓web頁面顯示的效果適當。

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

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

window.devicePixelRatio是設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips
以Samsung GALAXY Note 2為例，我們可以在chrome的模擬器中很快地找到這個設備



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

7、hover & touch
不再有hover了，並且開始關注touch。這點開發經驗還少，以後再補充。