移动键盘更改html视口大小

Question

移动键盘更改html视口大小

sha*_*een 5 html css keyboard mobile

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

我已经搜索了很多有关此问题的内容，没有任何帮助。

我发现答案之一是根据新的视口调整布局：由于键盘的原因，移动视口的大小发生了变化

但这并不实际。

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

经过一番测试后，我发现我将在答案中列出一个hack，如果有更好的方法，请告诉:)

Answer 1

sha*_*een 7

使用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});
});

Run Code Online (Sandbox Code Playgroud)

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

如果键盘覆盖输入您可以将输入的位置很容易地改变，以fixed和top为0。

伙计们！那是一场噩梦，直到我找到你的答案。如果我的评论被删除，我不会给出 *** 因为它不是“用于要求澄清或指出问题”，我只是想谢谢你。 (5认同)
谢谢！让我补充一下，您可以将其包装在窗口调整大小中，以便每次调整屏幕大小时它都会进行调整： window.onresize = function (event) { // 这里调整代码大小 }; 如果您使用不同的视口，可能会很有用。 (4认同)
这只是阻止了我放弃开发并去农场工作。 (4认同)

归档时间：	9 年，2 月前
查看次数：	5077 次
最近记录：	6 年前