移动web开发常见问题积累

最新整理（2017）— 已应用

1、一部分Android版本系统设置height和line-height的高度无效，可通过"-webkit-appearance: listbox;"属性解决：

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

2、设置滚动样式：

设置上下滚动样式： overflow-y: scroll;
设置弹性滚动样式：-webkit-overflow-scrolling: touch;

3、兼容键盘挡住输入框问题（ios）

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

4、按原图切下来的图片在手机上会模糊【链接】

因为手机屏幕的像素密度和网页的像素密度不一样。
Android 手机480x800的屏幕，iPhone4的640x960 的屏幕都会倍缩小成一个大约320x480的网页。
结果在PC上正好的图片，手机上其实是经过1.5~2倍缩放后才显示在网页上，看起来就会模糊。
所以为手机端准备的图片，一般要比PC上的图片大1.5~2倍才能清晰显示。

5、去掉手机端点击元素时出现的阴影（高亮）

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

备注：transparent属性值在android下无效。

6、去掉手机端元素的内阴影：

-webkit-appearance:none;

7、禁止手机端屏幕缩放：

width可视宽度，
initial-scale初始化缩放比例，
maximum-scale允许用户缩放的最大比例，
minimum-scale允许用户缩放的最小比例，
user-scalable是否允许用户缩放。

8、手机端video点播放自动全屏问题：

9、禁止保存或拷贝图像：

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

10、当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，禁止缩放：

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