移动键盘更改 html 视口大小

Question

A known problem if you are using percentage (or viewport unit) width and height for <body> is that when mobile keyboard invoke due to input the size of any percentage/viewport element will change .如果您为<body>使用百分比（或视口单位）宽度和高度，一个已知问题是当移动键盘因输入而调用时，任何百分比/视口元素的大小都会改变。

I've searched a lot about this problem and nothing could really help.我已经搜索了很多关于这个问题，但没有什么能真正帮助。

I found one of the answer is to adjust the layout according to the new viewport : mobile viewport resize due to keyboard我发现答案之一是根据新视口调整布局：移动视口因键盘而调整大小

but this is not really practical.但这并不实用。

Does anybody know how to manipulate mobile keyboard on web ?有人知道如何在网络上操作移动键盘吗？

After some test's I found a hack that i'll put in the answers, if there are better ways, please tell :)经过一些测试后，我发现了一个技巧，我会将其放在答案中，如果有更好的方法，请告诉:)

Answer 1

Use JavaScript/jQuery to set the height and width of <body> in px.使用 JavaScript/jQuery 以 px 为单位设置<body>的高度和宽度。

Using this code:使用此代码：

$(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});
});

In this case <body> will be set in px according to the viewport size and will stay constant with any changes to the viewport.在这种情况下， <body>将根据视口大小设置为 px，并且随着视口的任何变化而保持不变。

If the keyboard covers the input you can easily change the position of the input to fixed and top to 0.如果键盘覆盖了输入，您可以轻松地将输入的位置更改为fixed ，将top更改为 0。

移动键盘更改 html 视口大小

问题描述

1 个解决方案

解决方案1
18 已采纳 2016-09-20 04:55:23

移动键盘更改 html 视口大小

问题描述

1 个解决方案

解决方案1 18 已采纳 2016-09-20 04:55:23

解决方案1
18 已采纳 2016-09-20 04:55:23