我们公司有一个页面底部用到了fixed样式，每当弹出键盘的时候，IOS下fixed就会走样(据我所知android没有该问题)。
为此之前我经过产品的同意做了简单的处理（方法1）。
方法一：
focus的时候让fixed块position变为relative，这是最简单的处理方法。
下面是我的小demo
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
<style>
* {
padding: 0;
margin: 0;
}
.input {
margin:10px 10px 400px 10px;
width: 200px;
height: 30px;
border: 1px solid #ccc;
display: block;
}
.next {
width: 100%;
height: 44px;
line-height: 44px;
background: orangered;
position: fixed;
bottom:0;
color:#fff;
text-align: center;
}
.pos-rel {
position: relative;;
}
</style>
<script src="../js/zepto.js"></script>
</head>
<body>
<section class="content"> <input class="input" type="text" />
<input class="input" type="text" />
<input class="input" type="text" /> <div class="next">
下一步
</div>
</section> <script>
$(function() {
var isIOS = (/iphone|ipad/gi).test(navigator.appVersion); if (isIOS) {
$('.content').on('focus', 'input', function () {
$('.next').addClass('pos-rel');
}).on('focusout', 'input', function () {
$('.next').removeClass('pos-rel');
});
}
});
</script>
</body>
</html>
方法二：
position：absolute；每次滚动的时候重新算位置。
下面是我的小demo，touch的时候作了隐藏处理，input focusout和window resize的时候作了fixed位置重新计算。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
<style>
* {
padding: 0;
margin: 0;
}
.input {
margin:10px 10px 400px 10px;
width: 200px;
height: 30px;
border: 1px solid #ccc;
display: block;
}
.next {
width: 100%;
height: 44px;
line-height: 44px;
background: orangered;
position: absolute;
color:#fff;
text-align: center;
}
.pos-rel {
position: relative;;
}
</style>
<script src="../js/zepto.js"></script>
</head>
<body>
<input class="input" type="text" />
<input class="input" type="text" />
<input class="input" type="text" /> <div class="next">
下一步
</div>
</body>
<script>
var isIOS = (/iphone|ipad/gi).test(navigator.appVersion); var likeFixed = function() {
//解绑resize事件 以免进入死循环
$(window).unbind('resize', likeFixed); var t = document.documentElement.scrollTop || document.body.scrollTop, fixed_height = 44, top; //网页可见高度加上滚动条高度 - fixed元素的高度
top = window.innerHeight+ t - fixed_height;
//设置fixed div的top
$('.next').css({'top': top+'px' }); //重新绑定resize事件
setTimeout(function() {
$(window).bind('resize', likeFixed);
}, 10);
} $(function() {
if (isIOS) {
likeFixed();
function touchstart(event) {
$('.next').css('opacity',0);
}
function touchend(event) {
$('.next').css('opacity',1);
}
//touch的时候隐藏
document.addEventListener("touchstart", touchstart, false);
//滚动后重新设置fixed div的位置
window.onscroll = likeFixed;
//touch后显示
document.addEventListener("touchend", touchend, false);
} //所有input blur时重新计算位置，兼容chrome
$('body').on('focusout', 'input', likeFixed);
}); </script>
</html>