页面向上滚动虚拟键盘在iphone中的存在

Question

我的网站上有一个聊天应用程序页面.主容器在移动设备上占据全高和宽度.容器内部有position: fixed3个.最后一个div 有一个和其他聊天应用程序一样发送它.以下是简要代码:divsposition:absolute#app-msg-composertextareabutton

<div id='app-container'>
    <div id='app-header'></div>
    <div id='app-body'></div>
    <div id='app-msg-composer'>
         <textarea></textarea>
         <button>Send</button>
    </div>
</div>

#app-container{
    position: fixed;
    height:100%;
    width:100%;
    top: 0px;
    bottom:0px;
}
#app-header{
    position:absolute;
    height:48px;
    width:100%;
    top:0px;
}
#app-body{
    position:absolute;
    top:48px;
    bottom: 74px;
    width:100%;
}
#app-msg-composer{
    position:absolute;
    bottom:0px;
    height:74px;
    width:100%;
}

作为textarea被点击,并配备对焦时,虚拟键盘的存在使得页面的上半部分向上滚动屏幕(出视口).此问题仅适用于iPhone,因为它在其他Android设备上运行良好.我搜索了这个问题,发现它是iphone中的一个常见问题,因为:

在iPhone上,虚拟键盘的存在不会改变视口高度.

我尝试了stackoverflow的一些解决方案,但没有用.如何在javascript或css中执行此操作,因为我没有使用任何库？

Answer 1

您需要将 CSS 属性更改position为fixed. 这样，它实际上就“固定”了。它也不能随着屏幕尺寸的改变而移动。

另一种方法是将其简单地与屏幕的最顶部对齐。这样做应该使尖端元素保持在顶部，中间在中间......