移动端 Web 开发踩坑之旅

发表于

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

1
2
3
4
5
6
element {
    -webkit-appearance: listbox;
    width: 100%;
    height: 80px;
    line-height: 80px;
}

2、设置滚动样式：

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

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

1
2
3
4
$("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、去掉手机端点击元素时出现的阴影（高亮）

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

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

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

1
-webkit-appearance:none;

7、禁止手机端屏幕缩放

1
<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是否允许用户缩放。

8、微信分享不出去有可能的原因：图片过大

9、video点播放自动全屏问题：

1
<video x-webkit-airplay="true" x5-playsinline webkit-playsinline playsinline poster='' preload='true'></video>

资料：
h5常见问题及注意事项汇总
iOS下Fixed+Input BUG现象
40条常见的移动端Web页面问题解决方案
移动端开发常见的坑