做有态度的前端团队

网易FEG前端团队

移动端Bug汇总

前言

进来小组,可以说了做不少移动端页面,各种千奇百怪的bug可以说见过不少。但是直到最近的项目,每每到了测试阶段我就很头疼,为什么我做出来的的页面bug数量总是没有明显递减,而且几乎每次都会发现一些新的bug。bug的数量没有明显递减,从侧面可以反应,经验的积累和实际项目的结合还是不够,最起码不应该出现以前出过的错误。同一个问题,不应该每次都花同样的时间去解决,第一次的经验应该给第二次带来效率。所以,在这里总结一下移动端值得记录的bug,包括一些解决和未解决的问题。会不断的更新汇总...

##已解决

1、输入框聚焦时无法弹起,被拉起的键盘挡住了

  • 截图
    20150618113315.png

  • 原因分析
    正常情况下,输入框聚焦后会拉起系统键盘,然后页面弹起让输入框在键盘上面。但是在 单页面 (禁止滚动条),因为没有滚动条,在IOS7.x系统以及很多安卓机子上面会出现输入框被遮挡的bug。

  • 解决方案
    给单页面加上最小高度。通过设置最小高度,输入框聚焦后拉起键盘,页面还是可以滚动,所以就不会被遮挡了。设置最小高度碰巧又能解决另一个问题“在安卓下,输入框聚焦后页面会整体缩小”。因为为了达到更好的适配效果,我们使用了rem单位,通过控制根的字体大小来适配。这样就引起了一个问题,当输入框聚焦后键盘拉起,如果没有滚动条,页面高度变小,当高度小于宽度时,有些安卓机子会以最小的作为宽度,所以认为宽度变化了,那么根的字体大小就变化了,导致页面缩小了。

Html

<body>
   <div id="Jmain">
   </div>
</body>

Javascript

$("html").css("min-height",document.documentElement.clientHeight);

2、在部分安卓机子上,输入框聚焦后,页面整体缩小

  • 原因分析
    因为为了达到更好的适配效果,我们使用了rem单位,通过控制根的字体大小来适配。这样就引起了一个问题,当输入框聚焦后键盘拉起,相当于手机屏幕高度变小,当高度小于宽度时,有些安卓机子会以最小的作为宽度,所以认为宽度变化了,那么根的字体大小就变化了,导致页面缩小了。

  • 解决方案
    页面加载完后,给单页面加上字体大小

Javascript

$("html").css("font-size",62.5*$(window).width()/320+"%");

3、红米下层级混乱

  • 截图

20150618102253.png

  • 原因分析

Html

 <div class="boxA">
     <div class="boxB"></div>
 </div>
 <div class="boxC"></div>

假如 boxA 设置为 relative 定位,boxB 设置为 absolute 定位,boxC 设置为 absolute 定位。如果你没有设置z-index,正常情况下,boxC也是会在boxB的上面。但是在红米的自带浏览器下,如果没有设置z-index,relative的定位是最高的。所以会出现boxC 在boxB的下面。

  • 解决方案
    把 boxA 的z-index设为1,boxB的z-index设为5,z-index设为10。在用到绝对定位和相对定位时,要养成设置z-index的习惯。

css

.boxA{
   z-index:1;
}
.boxB{
   z-index:5;
}
.boxC{
   z-index:10;
}

4、type="number"类型的输入框问题

优点是Android下实现的一个真正的数字键盘

缺点一:iOS下不是九宫格键盘,输入不方便

缺点二:旧版Android(包括微信所用的X5内核)在输入框后面会有超级鸡肋的小尾巴,好在Android 4.4.4以后给去掉了。

  • 截图

输入框

不过对于缺点二,我们可以用webkit私有的伪元素给fix掉:

input[type=number]::-webkit-inner-spin-button,  
input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none; 
        appearance: none; 
        margin: 0; 
}

未解决

1、在部分安卓机子上,媒体已经无法自动播放

IOS是一直都不支持自动播放的,而很多新版的手机chrome也已经逐渐取消自动播放了。而最近发现有些安卓机子的自带浏览器也不能自动播放,比如小米的各个型号的机子都仿效IOS的做法。

2、在部分安卓机子上,音乐无法循环播放

比如小米2A,红米,中兴v5s

(待续。。。)

手机阅读请扫描下方二维码:

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif