Android键盘使用CSS中的vh缩小视口和元素 [英] Android Keyboard shrinking the viewport and elements using unit vh in CSS

问题描述

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

I am experiencing a very strange and unique issue.

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

All my pages are using vh and vw CSS units instead of px due to the nature of the project.

问题:在Android平板电脑上，当您触摸输入字段时，默认键盘会推动查看端口，这会导致页面以及页面中的所有元素缩小.

Issue: On Android tablets, when you touch the input field the default keyboard pushes the view port which is causing the page and all the elements in the page to shrink.

在ipad上，由于键盘与屏幕重叠且不按屏幕，因此不存在此问题.

On ipad this issue does not exist since the keyboard overlaps the screen and does not push the screen.

寻找任何解决方案，以避免Android键盘不推浏览器的视口并保持原始大小.

Looking for any solution to avoid the Android keyboard not to push the viewport of the browser and keep the original size.

注意:我剩下的唯一选择是避免键盘推视口，我将无法更改CSS单位或使用xml清单.这些是遇到此问题的网页.

Note: The only option i am left with is to avoid keyboard to push viewport, i won't be able to change the CSS units or use xml, manifest. These are web pages which experiencing this issue.

推荐答案

我知道这是一个老问题，但是我的应用程序中存在完全相同的问题.我发现的解决方案非常简单. (我的应用程序在Angular中，因此我将其放在app.component的ngOnInit函数中，但是document.ready()或任何其他初始化完成"回调在适当的实验下应该可以正常工作)

I know this is an old question, but I had the exact same problem in my app. The solution I found was fairly simple. (My app is in Angular so I put this in the app.component's ngOnInit function, but document.ready() or any other "initialization complete" callback should work just fine with the proper experimentation)

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

这会强制视口元明确设置视口高度，而硬编码

This forces the viewport meta to explicitly set viewport height, whereas hardcoding

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

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

doesn't work because the device-width and device-height change when Android's soft keyboard is opened.

这篇关于Android键盘使用CSS中的vh缩小视口和元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！