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

Question

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

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

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

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

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

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

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

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

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

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

Answer 2

根据 Tyler 的问题，这是脚本的香草版本，似乎更简洁一些：

addEventListener("load", function() {
    var viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute("content", viewport.content + ", height=" + window.innerHeight);
})

如果您在元标记声明之后使用它，您甚至可以摆脱它addEventListener：

var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute("content", viewport.content + ", height=" + window.innerHeight);

Answer 3

这是一个更完整的解决方案，考虑了屏幕方向的变化：

// Original viewport definition, note the "id" that I use to modify the viewport later on:
<meta name="viewport" id="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

<script>
// Global boolean variable that holds the current orientation
var pageInPortraitMode;

// Listen for window resizes to detect orientation changes
window.addEventListener("resize", windowSizeChanged);

// Set the global orientation variable as soon as the page loads
addEventListener("load", function() {
  pageInPortraitMode = window.innerHeight > window.innerWidth;
  document.getElementById("viewport").setAttribute("content", "width=" + window.innerWidth + ", height=" + window.innerHeight + ", initial-scale=1.0, maximum-scale=1.0, user-scalable=0");
})

// Adjust viewport values only if orientation has changed (not on every window resize)
function windowSizeChanged() {
  if (((pageInPortraitMode === true) && (window.innerHeight < window.innerWidth)) || ((pageInPortraitMode === false) && (window.innerHeight > window.innerWidth))) {
    pageInPortraitMode = window.innerHeight > window.innerWidth;
    document.getElementById("viewport").setAttribute("content", "width=" + window.innerWidth + ", height=" + window.innerHeight + ", initial-scale=1.0, maximum-scale=1.0, user-scalable=0");
  }
}
</script>

Answer 4

同样的问题让我步履维艰。我没有找到任何 css 解决方案或解决方法来解决该问题。

但是，如果您可以使用 JQuery（或几乎 JavaScript），我有一些代码可以用来解决它。

var viewportHeight = $(window).height();
var viewportWidth = $(window).width();
$('body,html').css("height",viewportHeight); //if vh used in body/html too
$('.someClass').css("height",viewportHeight*0.12);// or whatever percentage you used in vh
$('#someId').css("width",viewportWidth*0.12);

嗯，这只是一个示例，您可以使用您需要的百分比、jQuery 标识符。

PD：有一个提示供您参考。将代码放在 html 的最后或$(document).ready(function() { });内 ，如果需要响应式设计，也将其放在orientationchange事件中；这边走。

$(window).on("orientationchange",function(event){ window.setTimeout(function(){
var viewportHeight = $(window).height();
var viewportWidth = $(window).width();
$('body,html').css("height",viewportHeight);
$('.someClass').css("height",viewportHeight*0.12);
$('.someClass').css("width",viewportWidth*0.09);
$('#someId').css("height",viewportHeight*0.1);
}}, 450);});

我在上面放置了一个 450 毫秒的计时器，因为设备进行方向更改时会出现延迟。

对不起我的英语，干杯