我们公司有一个页面底部用到了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 = (/iphoneipad/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 = (/iphoneipad/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>
以上是我的处理方法，也许存在不足之处，欢迎大家提出宝贵意见，一起交流。
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索input
， function
， next
， position
， px
， touchstart
， touchend
， Fixed
window.resize
移动端ios不支持fixed、ios不支持fixed、ios微信不支持fixed、ios fixed兼容问题、fixed ios兼容性问题，以便于您获取更多的相关知识。