移动键盘更改html视口大小 [英] Mobile keyboard changes html viewport size
问题描述
如果您为<body>使用百分比(或视口单位)宽度和高度，则已知的问题是，由于输入而导致移动键盘调用时，任何百分比/视口元素的大小都会改变.
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 .
关于这个问题，我进行了很多搜索，没有任何帮助.
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
但这不是很实际.
有人知道如何在网络上操作移动键盘吗?
Does anybody know how to manipulate mobile keyboard on web ?
经过一些测试后，我发现了一个我将在答案中列出的hack，如果有更好的方法，请告诉:)
After some test's I found a hack that i'll put in the answers, if there are better ways, please tell :)
推荐答案
使用JavaScript/jQuery设置<body>的高度和宽度(以px为单位).
Use JavaScript/jQuery to set the height and width of <body> in 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为单位设置，并且对视口的任何更改都将保持不变.
In this case <body> will be set in px according to the viewport size and will stay constant with any changes to the viewport.
如果键盘覆盖了输入，则可以轻松地将输入的位置更改为fixed，将top更改为0.
If the keyboard covers the input you can easily change the position of the input to fixed and top to 0.
这篇关于移动键盘更改html视口大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
