做有态度的前端团队

网易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

(待续。。。)

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

已有 73 条评论

  1. 0KeeTeam

    0KeeTeam

  2. 0KeeTeam

    0KeeTeam

  3. 0KeeTeam

    0KeeTeam
    expr 878054017 + 919843824

  4. 0KeeTeam

  5. 0KeeTeam

    0KeeTeam
    CRLF-Header:CRLF-Value

  6. 0KeeTeam

    0KeeTeam|expr 999955970 + 960202874

  7. 0KeeTeam

    dungouubrqkszhvhehdc

  8. 0KeeTeam

    0KeeTeam%0d%0aCRLF-Header:CRLF-Value

  9. 0KeeTeam

    0KeeTeam

  10. test

    test

  11. test

    test

  12. test

    test
    CRLF-Header:CRLF-Value

  13. /*1*/{{884973660+858317967}}

    test

  14. test

  15. test

    test%0d%0aCRLF-Header:CRLF-Value

  16. ${840103157+951727467}

    test

  17. test

    ${818914255+962113817}

  18. iaeoamhnvsfnsoacxlay

    test

  19. test

    ${@var_dump(md5(570771983))};

  20. test

    test\r\nCRLF-Header:CRLF-Value

  21. test

    test

  22. 1

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

  23. 1

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

  24. 1

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

  25. 1

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

  26. 1

    1

  27. 1

    1

  28. 1

    1

  29. 1

    1

  30. 1

    1

  31. 1

    1

  32. 1

    1

  33. 1

    1

  34. 1

    1

  35. 1

    1

  36. 1

    1

  37. 1

    1

  38. 1

    1

  39. 1

    1

  40. 1

    1

  41. 1

    1

  42. 1

    1

  43. 1

    1

  44. 1

    1

  45. 1

    1

  46. 1

    1

  47. 1

    1

添加新评论

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