移動端頁面開發的常見問題

1、頁面高度渲染錯誤
在各移動端瀏覽器中經常會出現這種頁面高度100%的渲染錯誤，頁面低端和系統自帶的導航條重合了，高度的不正確我們需要重置修正它，通過javascript代碼重置掉：

document.documentElement.style.height = window.innerHeight + 'px';

2、移動端點擊事件出現高亮

-webkit-tap-highlight-color:rgba(0,0,0,0);
//-webkit-tap-highlight-color:transparent;

3、蘋果手機的一些設置

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

如果content設置爲yes，Web應用會以全屏模式運行，反之，則不會。content的默認值是no，表示正常顯示。你可以通過只讀屬性window.navigator.standalone來確定網頁是否以全屏模式顯示。

4、format-detection設置。

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

format-detection 啓動或禁用自動識別頁面中的電話號碼、郵箱地址。

5、禁止複製、選中文本

Element {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
     user-select: none;
}

6、長時間按住頁面出現閃退

element {
    -webkit-touch-callout: none;
}

7、iphone及ipad下輸入框默認內陰影

Element{
    -webkit-appearance: none; 
}

8、ios和android下觸摸元素時出現半透明灰色遮罩

Element {
    -webkit-tap-highlight-color:rgba(255,255,255,0)
}

9、旋轉屏幕時，字體大小調整的問題

*{
   -webkit-text-size-adjust:100%;  
}

10、頂部狀態欄背景色

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

11、瀏覽器私有及其它meta

（1）QQ瀏覽器私有

<meta name="x5-fullscreen" content="true">//全屏模式
<meta name="x5-orientation" content="portrait">//強制豎屏
<meta name="x5-orientation" content="landscape">//強制橫屏
<meta name="x5-page-mode" content="app">//應用模式

（2）UC瀏覽器私有

<meta name="full-screen" content="yes">//全屏模式
<meta name="screen-orientation" content="portrait">//強制豎屏
<meta name="screen-orientation" content="landscape">//強制橫屏
<meta name="browsermode" content="application">//應用模式

部分內容轉載自http://www.mahaixiang.cn/ydseo/1529.html，http://www.mamicode.com/info-detail-1187764.html