html - 响应式网页设计，在移动设备上拉起键盘会扰乱设计

Question

我为我的网站创建了响应式设计。它基于网站内容位于一个高度为窗口 100% 的 div 中。问题在于，当用户单击输入字段时，浏览器的大小会缩小以适应手机浏览器上键盘和顶部网址栏之间的区域。这让我的设计在键盘打开时看起来很奇怪。

知道如何解决这个问题吗？我没有在其他响应式网站上看到这种情况，但也没有真正仔细观察过。

我的 html 文件的头部有以下内容:

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

基本上，我希望在键盘打开时隐藏原本会被键盘覆盖的区域，而不是向上推并压扁我的整个布局。

编辑:我通过这样做修复了它

$("#comment-text-area").focus(function() {
    var height = $("body").css('height');
    $("body").css('height', height);
});

Answer 1

或许您可以使用 javascript 来检测输入字段何时获得焦点，然后将窗口的像素大小设置为焦点之前的任何值，然后在该字段未获得焦点时将其重置回自动？