javascript–Android键盘使用CSS中的单位vh缩小视口和元素

概述我遇到了一个非常奇怪和独特的问题.由于项目的性质,我的所有页面都使用vh和vwCSS单元而不是px.问题：在Android平板电脑上,当您触摸输入字段时,默认键盘会推动视图端口,导致页面和页面中的所有元素缩小.在ipad上,由于键盘与屏幕重叠并且没有按下屏幕,因此该问题不存在.寻找任何

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

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

问题：在Android平板电脑上,当您触摸输入字段时,默认键盘会推动视图端口,导致页面和页面中的所有元素缩小.

在ipad上,由于键盘与屏幕重叠并且没有按下屏幕,因此该问题不存在.

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

注意：我唯一的选择是避免键盘按视口,我将无法更改CSS单位或使用xml,manifest.这些是遇到此问题的网页.

解决方法:

我知道这是一个老问题,但我在我的应用程序中遇到了完全相同的问题.我发现的解决方案相当简单. (我的应用程序是在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);

这会强制视口元显式设置视口高度,而硬编码

<Meta name="vIEwport" content="wIDth=device-wIDth, height=device-height, initial-scale=1">

因为AndroID的软键盘打开时设备宽度和设备高度发生变化,所以不起作用.

总结

以上是内存溢出为你收集整理的javascript – Android键盘使用CSS中的单位vh缩小视口和元素全部内容，希望文章能够帮你解决javascript – Android键盘使用CSS中的单位vh缩小视口和元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。