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

1、禁止用戶屏幕旋轉。

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

?

2、webkit內核的私有meta標簽

<meta?content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0"?name="viewport"?/>

<meta?content="black"?name="apple-mobile-web-app-status-bar-style"?/>

<meta?content="yes"?name="apple-mobile-web-app-capable"?/>

<meta?content="telephone=no"?name="format-detection"?/>

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

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

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

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

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

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

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

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

setTimeout(scrollTo,0,0,0);

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

?

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

轉載于:https://www.cnblogs.com/linzenews/p/5822975.html

總結

以上是生活随笔為你收集整理的移动前端开发总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。