Chrome屏幕键盘阻止了移动设备页面底部的内容

问题描述 投票:2回答:1

[这里,我录制了有关问题的视频。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个回答
0
投票

您得到这个答案了吗?之前还可以,但是现在android-chrome位于页面顶部,不再将其推上去。我正在使用webview,也许他们有一些选择吗?

快速解决方法是在屏幕底部添加填充,可能是200-300px

© www.soinside.com 2019 - 2024. All rights reserved.