安卓网页应用程序键盘未在打开网页应用程序时调整视图大小

Question

安卓网页应用程序键盘未在打开网页应用程序时调整视图大小

4

当键盘出现时，我在 Android 设备上添加到主屏幕的 Web 应用程序会出现奇怪的行为。

我有一个 Web 应用程序：

<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
</head>
<body style="overflow-y: scroll">
    <div id="red" style="height:200px;width:100%;background-color:red"></div>
    <input type="text">
    <script>
        (function() {
            var baseH = window.innerHeight;
            window.addEventListener("resize", function() {
                if (window.innerHeight<baseH) {
                    document.getElementById('red').innerHTML = 'KEYBOARD';
                } else {
                    document.getElementById('red').innerHTML = 'NO KEYBOARD';
                }
            });
        })();
    </script>
</body>
</html>

如果我打开Web应用程序，点击输入字段，虽然键盘出现但未触发调整大小事件。

如果我在Android设备上按最近的应用程序，然后单击当前的Web应用程序以返回它，然后单击输入字段，键盘就会出现并触发调整大小事件。

如何使第一次打开Web应用程序时触发调整大小事件？

在Nexus4、Nexus5和Nexus7上进行了测试，均为Android 4.4.x。

- Benjamin L.

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- IjzerenHein · Answer 1

那是因为在视口元标记中设置了height=device-height。移除它应该可以解决问题。