javascript - Android键盘使用CSS中的单位vh缩小视口(viewport)和元素

Question

我遇到了一个非常奇怪和独特的问题。

由于元素的性质，我所有的页面都使用 vh 和 vw CSS 单位而不是 px。

问题:在 Android 平板电脑上，当您触摸输入字段时，默认键盘会插入视口(viewport)，从而导致页面和页面中的所有元素缩小。

在 ipad 上不存在此问题，因为键盘与屏幕重叠并且不插入屏幕。

寻找任何解决方案来避免Android键盘不推送浏览器的视口(viewport)并保持原始大小。

注意:我剩下的唯一选择是避免键盘插入视口(viewport)，我将无法更改 CSS 单位或使用 xml、 list 。这些是遇到此问题的网页。

Answer 1

我知道这是一个老问题，但我在我的应用程序中遇到了完全相同的问题。我找到的解决方案相当简单。 (我的应用程序在 Angular 中，所以我把它放在 app.component 的 ngOnInit 函数中，但是 document.ready() 或任何其他“初始化完成”回调应该可以正常工作通过适当的实验)

setTimeout(function () {
        let viewheight = $(window).height();
        let viewwidth = $(window).width();
        let viewport = document.querySelector("meta[name=viewport]");
        viewport.setAttribute("content", "height=" + viewheight + "px, width=" + viewwidth + "px, initial-scale=1.0");
    }, 300);

这会强制视口(viewport)元显式设置视口(viewport)高度，而硬编码

<meta name="viewport" 
content="width=device-width, height=device-height, initial-scale=1">

不起作用，因为打开 Android 的软键盘时设备宽度和设备高度会发生变化。