Question

当键盘出现时，我在Android设备上添加到主屏幕的网络应用中遇到了奇怪的行为。

我有一个网络应用程序：

<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>

如果我打开网络应用，点击输入字段，会出现键盘，但不会触发调整大小事件。

如果我在我的Android设备上按最近的应用程序并点击当前的网络应用程序返回其中然后单击输入字段键盘出现并触发调整大小事件。

如何在第一次打开网络应用时触发调整大小事件？

在Android 4.4.x上测试Nexus4，Nexus5和Nexus7

Answer 1

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

当Web应用程序打开一次时，Android Web应用程序键盘不会调整视图大小

1 个答案: