移动键盘更改 html 视口大小答案

【问题标题】：Mobile keyboard changes html viewport size移动键盘更改 html 视口大小
【发布时间】：2017-01-27 21:32:33
【问题描述】：

如果您为<body> 使用百分比（或视口单位）宽度和高度，一个已知问题是当移动键盘因输入而调用时，任何百分比/视口元素的大小都会发生变化。

我已经对这个问题进行了很多搜索，但没有任何帮助。

我发现答案之一是根据新视口调整布局： mobile viewport resize due to keyboard

但这并不实际。

有人知道如何在网络上操作移动键盘吗？

经过一些测试，我发现了一个技巧，我会在答案中加入，如果有更好的方法，请告诉:)

【问题讨论】：

标签： html css mobile keyboard

【解决方案1】：

使用 JavaScript/jQuery 设置<body> 的高度和宽度，单位为 px。

使用此代码：

$(function() {
    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    $("html, body").css({"width":w,"height":h});
});

在这种情况下，<body> 将根据视口大小设置为 px，并且会随着视口的任何更改保持不变。

如果键盘覆盖了输入，您可以轻松地将输入的位置更改为 fixed 和 top 为 0。

【讨论】：

谢谢！在我找到你的答案之前，那是一场噩梦。如果我的评论被删除，我不会在意，因为它不是“用来要求澄清或指出问题”，我只想谢谢你。
谢谢！让我补充一点，您可以将其包装在调整大小的窗口中，以便每次调整屏幕大小时都会调整： window.onresize = function (event) { // resize code here };如果您使用不同的视口，可能会很有用。
这只是阻止我放弃开发并去农场工作。