移动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%;}