移动端jquery项目 webapp表单页 bug总结

1.在苹果手机上，点击select和input标签，会弹出苹果手机自带键盘，选择或输入完成后键盘收起后页面上会留下空白

原因：尚不明确，苹果自带键盘弹起时页面有时会被顶起上移，有时不会，页面不上移时键盘会遮盖住部分input框

解决办法：给select和input标签添加blur失焦事件，设置document高度为100%，并使窗口滚动到左上角（0,0）位置.

代码如下：以select为例，input同理，多个标签需遍历添加（切记：注意缓存问题，浏览器清理缓存后一定手动点击刷新，确保没有缓存问题）

<select id="sel">

<option>111</option>

<option>222</option>

</select>

$("#sel").on("blur",function(){

$(document).height(100%);

window.scrollTo(0,0);

})

如若此方法不能解决，可使用div模拟select框，推荐jqury.selectbox-2.0.js插件

2.给div添加背景图片，div里最上方距离背景图片会有1px空白。

原因：尚不明确，设置背景图片大小为100%并不能解决

解决办法：设置背景图片位置top 为 -1px

代码如下：

background:url("../img/bk.png") no-repeat top  -1px left 0;

background-size:100% 100%; 

如果是使用img标签添加的图片，在padding和margin都已设为0的情况下，上方有空白的话，可设置margin-top为-1px

3.img标签添加图片，在padding和margin都已设为0的情况下，图片下方有3px空白。

原因：img标签为inline-block，图片下方在部分浏览器会有3px空白

解决办法：设置img标签为块元素

代码如下：

img{

display:block

}

4.苹果手机使用fixed定位弹框时，弹框里有input框，点击input框苹果自带键盘弹起，键盘收回时，input框光标上移,此时点击input相当于点击的是input下方的页面。

解决办法：让body滚动回光标上移之前的位置（和留空白的问题解决方法一样）

代码如下：

  $("#selc3").on("blur", function () {

    $(document).height("100%");

    window.scroll(0, 0);

  });