前端开发移动端常见问题积累

最新整理（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%; }

iOS软键盘收起后页面不缩回

let isiOS = !!window.navigator.userAgent.match(/\(i\[^;]+;( U;)? CPU.+Mac OS X/)
if(isiOS) { // 判断是否为IOS系统
    setTimeout(() => {
        const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
        window.scrollTo(0, Math.max(scrollHeight - 1, 0))
    }, 100)
}

不能自动播放部分手机解决方案：支持WeixinJSBridgeReady

document.addEventListener("WeixinJSBridgeReady", function (){ 
    video.play();
    video.pause(); // 视频会处于加载状态，为后面的流畅播放做准备
}, false)

IOS 输入框卡住问题

let iosInputBlur = function () { // 兼容ios输入框
  let isiOS = !!window.navigator.userAgent.match(/\(i\[^;]+;( U;)? CPU.+Mac OS X/)
  if(isiOS) { // 判断是否为IOS系统
    setTimeout(() => {
      const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
      window.scrollTo(0, Math.max(scrollHeight - 1, 0))
    }, 100)
  }
}