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 消失了~

不知道有没有人遇到过跟我一样的问题，求指教。

ios9 safari-mobile css html focus

阅读 15.9k

8 个回答

得票最新

zhayes

1.2k563101

发布于
2016-08-23

首先本人不支持在移动端开发过程中用fixed做导航定位。有的老板的苹果系统本身都不支持fixed，这回出一系列问题。至于页面整体往上移这种情况确实是存在的。

_57b25c7c26a93

发布于
2016-08-23

新手上路，请多包涵

是的，我也遇到这个问题，页面整体向上推，最后我没处理这块，就那样了，据说可以用绝对定位，然后js坚挺input事件，算与底部的距离

陈小二kkk

2701411

发布于
2016-08-23

谢谢邀请，但是比较抱歉，感觉并不能很好帮助题主回答这个问题。我曾经用swift的第三方库或者直接控制view的显示，但是显然，题主用的是html和我上面说的并不是一回事。
这应该是ios系统下，键盘事件触发，导致position:fixed失效，导致的显示问题~
题主可以看看下面的两个网站，希望对你有帮助啦~~~
传送门
 传送门