Chrome 屏幕键盘在移动设备页面底部阻止内容答案

【问题标题】：Chrome screen keyboard blocking content at bottom of page on mobileChrome 屏幕键盘在移动设备页面底部阻止内容
【发布时间】：2019-07-04 06:48:19
【问题描述】：

在这里，我录制了有关问题的视频。 https://www.youtube.com/watch?v=WZbKix3XGTE

问题在于屏幕上的键盘。内容位于键盘无法访问的后面。如果页面有输入端，用户将看不到其中输入的内容。

我只有chrome有这个问题，其他浏览器可以正常工作。

我想到的所有解决方案都包含 javascript。但我不确定 javascript 是否能完美地处理这个问题。我想在开始之前问你知识。仅使用 CSS 或其他东西有没有其他选择？

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=1" />
    <title></title>
    <style type="text/css">
    #top {
        background-color: lightgreen;
        width: 100%;
        height: 600px;
    }
    #bottom {
        background-color: green;
        height: auto;
        padding: 20px;
        margin-top: 10px;
    }
    #bottom > input {
        display: block;
        padding: 5px;
        width: 100%;
    }
</style>
</head>
<body>
    <div id="top">Top</div>
    <div id="bottom">
        <input type="text" />
    </div>
</body>
</html>

Codepen 链接 https://codepen.io/hllktlhndd/pen/yZKzyZ

【问题讨论】：

标签： javascript css google-chrome responsive mobile-website

【解决方案1】：

你得到答案了吗？这之前还可以，但现在 android-chrome 出现在页面顶部并且不再向上推。我正在使用 webview，也许他们有一些选择？

快速修复是在屏幕底部添加填充，可能是 200 - 300px

【讨论】：