移動web開發常見問題積累

最新整理（2017）— 已應用

一、一部分Android版本系統設置height和line-height的高度無效，可經過"-webkit-appearance: listbox;"屬性解決：

element {
    -webkit-appearance: listbox;
    width: 100%;
    height: 80px;
    line-height: 80px;
}

二、設置滾動樣式：

設置上下滾動樣式： overflow-y: scroll;
設置彈性滾動樣式：-webkit-overflow-scrolling: touch;

三、兼容鍵盤擋住輸入框問題（ios）

$("input").focus(function(){
    var scrollTop = $("body > div").height(); 
    $('html,body').animate({scrollTop: scrollTop+"px"}, 500);
});

四、按原圖切下來的圖片在手機上會模糊【連接】

由於手機屏幕的像素密度和網頁的像素密度不同。
Android 手機480x800的屏幕，iPhone4的640x960 的屏幕都會倍縮小成一個大約320x480的網頁。
結果在PC上正好的圖片，手機上實際上是通過1.5~2倍縮放後才顯示在網頁上，看起來就會模糊。
因此爲手機端準備的圖片，通常要比PC上的圖片大1.5~2倍才能清晰顯示。

五、去掉手機端點擊元素時出現的陰影（高亮）

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

備註：transparent屬性值在android下無效。

六、去掉手機端元素的內陰影：

-webkit-appearance:none;

七、禁止手機端屏幕縮放：

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
width可視寬度，
initial-scale初始化縮放比例，
maximum-scale容許用戶縮放的最大比例，
minimum-scale容許用戶縮放的最小比例，
user-scalable是否容許用戶縮放。

八、手機端video點播放自動全屏問題：

<video 
  x-webkit-airplay
  x5-playsinline
  webkit-playsinline
  playsinline
></video>

九、禁止保存或拷貝圖像：

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

十、當移動設備橫豎屏切換時，文本的大小會從新計算，進行相應的縮放，禁止縮放：

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