解决iOS下input和fixed 问题

在ios下若是页面底部有fixed 元素当有input输入框触发键盘时fixed会浮动在页面出现展现老是

解决方法有不少种，可是要根据实际须要更改

方法1、css解决（弊端：当有大面积input元素时会出现滑动不畅问题）

//这里给内容区域设置 position:absolute，而且设置一个距离fixed的底部距离

.main{

position:absolute; 

bottom:rem-calc(80px); //fixed元素的高度

top:0;

left:0;

width:100%;

}

方法2、js解决方法（弊端：每次input焦点事件时要执行一次）

.pos-rel {
position: relative;;
}

<script>

$(function() {
var isIOS = (/iphone|ipad/gi).test(navigator.appVersion);//判断是否是ios系统

if (isIOS) {
$(‘.main’).on(‘focus’, ‘input’, function () {
$(‘.fixed-bottom’).addClass(‘pos-rel’);
}).on(‘focusout’, ‘input’, function () {
$(‘.fixed-bottom’).removeClass(‘pos-rel’);
});
}
});
</script>

固然还有其它的解决方法例如使用iscroll.js刚开始就用的这种解决方式，后来发如今input元素较多或是有click事件页面引入iscroll.js会遇到各类坑不建议使用，固然也能够把fixed设置成absolute每次页面滚动变化时从新计算，这种方式也很是的消耗资源

综合以上仍是以为在带有input元素的页面尽可能避免fixed元素的使用