移动端Bug汇总

作者: 小军日期: 2015-06-19

184811

前言

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

##已解决

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

截图
原因分析
正常情况下，输入框聚焦后会拉起系统键盘，然后页面弹起让输入框在键盘上面。但是在 单页面 （禁止滚动条），因为没有滚动条，在IOS7.x系统以及很多安卓机子上面会出现输入框被遮挡的bug。
解决方案
给单页面加上最小高度。通过设置最小高度，输入框聚焦后拉起键盘，页面还是可以滚动，所以就不会被遮挡了。设置最小高度碰巧又能解决另一个问题“在安卓下，输入框聚焦后页面会整体缩小”。因为为了达到更好的适配效果，我们使用了rem单位，通过控制根的字体大小来适配。这样就引起了一个问题，当输入框聚焦后键盘拉起，如果没有滚动条，页面高度变小，当高度小于宽度时，有些安卓机子会以最小的作为宽度，所以认为宽度变化了，那么根的字体大小就变化了，导致页面缩小了。

Html

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

Javascript

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

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

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

Javascript

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

3、红米下层级混乱

截图

原因分析

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; 
}