iPhone 浏览器中 fixed 输入框 打开软键盘后 页面整体上移？
我知道这标题可能比较抽象，
举个例子来讲，有这样一个页面：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1">
<title>test</title>
<style>
.head{
position: fixed;
width: 100%;
height: 50px;
left: 0;
top: 0;
background: red;
}
.foot{
position: fixed;
width: 100%;
height: 50px;
left: 0;
bottom: 0;
background: blue;
}
.foot .input{
width: 300px;
height: 30px;
}
</style>
</head>
<body>
<div class="head"></div>
<div class="foot">
<input type="text" class="input">
</div>
</body>
</html>在 ios Safari 中打开是这样子的：
这并没有什么问题，
问题是 当打开虚拟键盘之后 变成了这样子：
注意 顶部 .head 那个div 消失了~
不知道有没有人遇到过跟我一样的问题，求指教。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（8）
首先本人不支持在移动端开发过程中用fixed做导航定位。有的老板的苹果系统本身都不支持fixed，这回出一系列问题。至于页面整体往上移这种情况确实是存在的。
是的，我也遇到这个问题，页面整体向上推，最后我没处理这块，就那样了，据说可以用绝对定位，然后js坚挺input事件，算与底部的距离
谢谢邀请，但是比较抱歉，感觉并不能很好帮助题主回答这个问题。我曾经用swift的第三方库或者直接控制view的显示，但是显然，题主用的是html和我上面说的并不是一回事。
这应该是ios系统下，键盘事件触发，导致position:fixed失效，导致的显示问题~
题主可以看看下面的两个网站，希望对你有帮助啦~~~
传送门
传送门
试试scrollIntoView。
网上看到别人的perfect解决方案
点击小球切换键盘，页面又下移几十px，奇葩，而且监听键盘事件唯独这个小球没反应；怎么解决
和你一样的问题 想问你解决了吗
我也有这种问题，请问有解决的方法么