响应式网页设计，在移动设备上拉起键盘会引起设计问题

Question

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

任何想法如何解决？我还没有在其他响应式网站上看到这种情况，但是也没有真正观察到。

我的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 来检测输入字段何时获得焦点，然后将窗口的像素大小设置为焦点之前的大小，然后在字段未获得焦点时将其重置回自动？