行動前端開發總結

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

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

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

 

2、webkit核心的私人meta標籤

1.  content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0"   content="black"
 
2. name="apple-mobile-web-app-status-bar-  content="yes" name="apple-mobile-web-app-capable"
3.  content="telephone=no" name="format-detection"/> (1)、主要I是強制讓文件的寬度與設備寬度保持1:1，最大寬度1.0，禁止螢幕縮放。 (2)、iphone的私人標籤，iphone頂端狀態條的樣式。 (3)、這個也是iphone私有標籤，允許全螢幕瀏覽。 (4)、禁止數字自動識別為電話號碼，這個比較有用，因為一串數字在iphone上會顯示成藍色，樣式加成別的顏色也是不生效的。
3、移除Android自動辨識郵箱地址
4. 安卓有郵箱自動辨識功能，但蘋果沒有。想去除信箱辨識功能，那就在head中加入一個meta標籤。
    content="email=no" name="format-detection" />"format-detection" 4、移除Android和ios的url網址列

setTimeout

(

scrollTo

,

0

,

0

,

0

);

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

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