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標籤表示：告訴裝置忽略將頁面中的數字識別為電話號碼，個別需要識別的話可以這樣開啟：<a href=”tel:13030303030″>13030303030</a>
例子見：常用meta標籤樣本
4、一定要注意連結的大小，因為大多是觸屏手機，要讓使用者很方便的能點擊到標籤（我以前看到過文章，現在找不到出處，好像是最小得42px*42px）:
操作對象的大小符合手指的操作，按鍵的大小設定規範：
食指點擊的間距 約為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列布局等。

/* Large desktop */
@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Landscape phones and down */
@media (max-width: 480px) { ... }

8、當然也可以根據判斷不同的終端跳轉到不同的URL，見：手機平板等移動端適配跳轉URL的javascript
9、手機瀏覽器多而亂，而且手機系統的預設處理方法也不同，相容問題絲毫不比PC版的簡單，所以要總結歸納常用的處理方法；
10、對手機平板的移動端來說，流量是很重要的，所以webapp中class和id的命名盡量斷點，如頭部可以命名為hd,中間為bd,底部為ft等（此建議待定，因為考慮到後期維護是否方便等問題）；

具體的經驗建議：
1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以同時屏蔽ios和android下點擊元素時出現的陰影。
備忘：transparent的屬性值在android下無效。
2、-webkit-appearance:none可以同時屏蔽輸入框怪異的內陰影，解決iOS下無法修改按鈕樣式，測試還發現一個小問題就是，加了上面的屬性後，iOS下預設還是帶有圓角的，不過可以使用 border-radius屬性修改。
3、-webkit-transform:translate3d(0, 0, 0)在ios下可以讓動畫更加流暢（這個屬性會調用硬體加速模式，無需通過JS引擎，直接瀏覽器核心渲染），但是在android下不可亂用，很多見所未見的bug就是因為這個。
4、@-webkit-keyframes可以預定義很多你所想到的動畫，然後通過-webkit-transition來調用。
5、-webkit-background-size可以做高清表徵圖，不過一些低版本的android只能識別background-size，所以有必要兩個都要寫上；用這個屬性的時候推薦用cover這個值，可以自動去匹配寬和高。
6、border-radius、box-shadow、gradient、border-image，不解釋，可以精簡代碼。
7、android、ios4及以下，固定寬/高區塊層級元素的overflow:scroll/auto失效，屬於瀏覽器的bug，可藉助第三方工具實現。
8、ios5+可以通過scrollTo(0,0)來自動隱藏瀏覽器地址欄。
9、css3動畫會影響你的自動聚焦，所以自動聚焦要在動畫執行之前來做，或者直接捨棄。
10、如果涉及較多域外連結，DNS Prefetching可以幫你做DNS預解析。
11、如果你希望你的網站更多地在SNS上傳播，那麼Open Graph Protocol會比較適合你。
12、當用iScroll時候，不能使用:focus{outline:0}偽類，否則滑動會卡。
13、IOS禁止橫豎屏時字型變大，-webkit-text-size-adjust: none;
14、iphone的Retina顯示屏的css中的數值都得翻倍，包括圖片大小也得翻倍，Retina顯示屏精緻，可以簡單理解為Retina顯示屏上的1像素相當於普通的2像素。
15、解決閃屏，-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d；
16、觸摸事件用touch系列，不要用click替代；
17、關於電量，JPEG最省電（JPEG>PNG>GIF）,圖片數量約多，約大約耗電，AJAX動態內容耗電，reflow和repaint耗電，webGL和translate3d耗電;

 

 

本文連結地址: WEB前端開發(www.css119.com)–WEBAPP開發技巧(手機網站開發注意事項)

 

WEBAPP開發技巧(手機網站開發注意事項)