移动开发问题总结

移动开发可分为移动端网页开发和移动webapp开发,移动端网页开发主要是适配各手机浏览器或者各原生app内部的webview,webapp开发是使用常见的HTML+CSS进行开发布局,然后通过第三方打包软件进行打包……


1、红米,华为部分手机使用overflow后,底部会出现黑色阴影

如图





分析问题

猜测可能这些手机的 webview 使用的流布局可能与 webkit 内核的流布局有点差异,能力有限,无法分析小米浏览器内核,只是猜测,希望知道的大佬求解!

解决办法

原来的代码:

1
2
3
4
.against {
display: none;
overflow-x: auto;
}

修改之后的代码:

1
2
3
4
5
6
7
.against {
display: none;
overflow-x: auto;
/* 改变了层级(可能吧) */
position: relative;
z-index: 1;
}

2、暂停/继续 css3 动画

在开发过程中,当遇到自己添加的动画需要暂停/继续时,可以尝试 css 的animation-play-state属性

animation-play-state有两个状态running/paused分别表示继续和暂停

1
2
3
4
5
//继续动画
$(".harvest-view__music").css("animation-play-state", "running");

//暂停动画
$(".harvest-view__music").css("animation-play-state", "paused");

如图:

3、Andriod5.0 以下 audio 等媒体文件不支持 https 协议!

亲测,小米 4.4.4 版本,华为 4.4.0 版本 audio 不支持 https 协议,改用 http 协议就好了

4、swiper 在 iphone6 上有卡顿

swiper 是比较常用的一个轮播图插件,在使用过程中,swiper 在 iphone6 中表现不理想,主要表现为卡顿,手指触碰卡顿,过渡效果白屏。

原因:在 iphone6 中,swiper 的 css 没有触发硬件加速,导致页面卡顿。

解决方法:在 swiper-wrap 类中加入如下代码,触发硬件加速

1
2
3
4
5
6
.swiper-wrap {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}