webApp注意問題

 1. 要響應式開發web，也就是頁面必須自適應屏幕大小，能夠採用流體佈局，如以前的文章（自適應寬度佈局），其餘具體的小問題能夠採用media query解決（讓IE支持CSS3 Media Query實現響應式Web設計和CSS3 Media Queries）

 

2. 由於手機大可能是高級瀏覽器，可使用html5+css3開發； 

 

3. 合理靈活的使用meta標籤，具體以下：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <meta content="telephone=no" name="format-detection" />

第一個meta標籤表示：強制讓文檔的寬度與設備的寬度保持1:1，而且文檔最大的寬度比例是1.0，且不容許用戶點擊屏幕放大瀏覽；

第二個meta標籤是iphone設備中的safari私有meta標籤，它表示：容許全屏模式瀏覽；

第三個meta標籤也是iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式；

第四個meta標籤表示：告訴設備忽略將頁面中的數字識別爲電話號碼

 

4. 必定要注意連接的大小，由於大可能是觸屏手機，要讓用戶很方便的能點擊到標籤

操做對象的大小符合手指的操做，按鍵的大小設置規範： 食指點擊的間距 約爲7*7 mm， 1mm間距， 拇指點擊8*8 mm，2mm間距。當前推薦的值爲9mm 大小，最小應不小於7mm。 固然一些重要操做，或者頻繁點擊的區域能夠設置的略微更大一些。

5. 要作好優雅降級（平穩退化），少用JS，圖片，要用戶禁止下載JS和圖片的時候頁面也能體現價值（由於不少APP默認設置爲3G下是不自動下載圖片等資源的）。

 

6. 對於圖片的處理，只要設置寬度，讓圖片自適應，防止圖片變形，固然要兼容的設備分辨率差距很大的時候，須要利用media queries根據分辨率的不一樣加載不一樣的圖片（須要同一張設置爲幾種不一樣的規格）,一是防止小分辨率設備加載大圖片浪費流量，二是防止大分辨率設備加載小圖片致使的圖片模糊問題。

 

7. 當設置分辨率過小的話，顯示正常模塊顯得太擁擠的狀況下，能夠利用media queries根據分辨率適當的顯示或隱藏模塊，如768px下顯示2列布局，320px顯示1列布局等。

 

8. 固然也能夠根據判斷不一樣的終端跳轉到不一樣的URL，見：手機平板等移動端適配跳轉URL的javascript

 

9. 手機瀏覽器多而亂，並且手機系統的默認處理方法也不一樣，兼容問題絲絕不比PC版的簡單，因此要總結概括經常使用的處理方法，如-webkit-tap-highlight-color:rgba(0,0,0,0)；/*禁止連接高亮*/-webkit-touch-callout:none;/*禁止連接長按彈出選項菜單*/等等

 

10. 對手機平板的移動端來講，流量是很重要的，因此webapp中class和id的命名儘可能斷點，如頭部能夠命名爲hd,中間爲bd,底部爲ft等（此建議待定，由於考慮到後期維護是否方便等問題）；