移動前端開發總結

標籤：

移動前端開發，也就是webapp，主要是針對Iphone、Android等高端手機。

1、禁止使用者旋轉螢幕。

這點可以肯定的說是做不到的，之前因為有項目需要禁止旋轉螢幕，所以網上查閱了大量的資料，發現根本沒有解決辦法，在移動版webkit中根本做不到。蘋果api也說明了，我們為了讓使用者在safari中正常的瀏覽網頁，我們必須保證使用者的裝置處於任何一個方位時，safari都能夠正常的顯示網頁內容（也就是自適應），所以我們禁止開發人員阻止瀏覽器的orientationchange事件，所以ios是禁止阻止orientationchange事件的，而Android也一樣，也是無法禁止旋轉螢幕，所以在webapp裡是做不到了。但是可以利用orientationchange事件判斷方向，橫屏時的顯示方式與豎屏時的顯示方式，寫成兩種樣式。

 

2、webkit核心的私人meta標籤

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

(1)、主要I是強制讓文檔的寬度與裝置寬度保持1:1，最大寬度1.0，禁止螢幕縮放。

(2)、iphone的私人標籤，iphone頂端狀態條的樣式。

(3)、這個也是iphone私人標籤，允許全屏瀏覽。

(4)、禁止數字自動識別為電話號碼，這個比較有用，因為一串數字在iphone上會顯示成藍色，樣式加成別的顏色也是不生效的。

3、去除Android自動識別郵箱地址

安卓有郵箱自動識別功能，而蘋果卻沒有。想去除郵箱識別功能，那就在head中加入一個meta標籤。

1. <meta content="email=no" name="format-detection" />

4、去除Android和ios的url地址欄

1. setTimeout(scrollTo,0,0,0);

將這句話放到window.onload裡就行。

 

（參考：WEB前端  http://www.linzenews.com/program/web/2773.html）

移動前端開發總結