响应式网页设计，拉动移动设备上的键盘设计

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

Answer 2

据我所知，当键盘显示时，移动浏览器不会调整窗口大小，它们只会移动并覆盖窗口。

也许你的问题是你达到100％身高的方式，是否有任何供应商特定的CSS或JS处理调整大小事件？

Answer 3

您可以尝试将user-scalable=false;添加到视口元标记中，但更有可能调整字段焦点是浏览器本身无法覆盖的功能。即使以设计为代价，通常也是一件好事，因为人们通常会喜欢更大的文本区域来查看他们正在键入的内容，所以我个人建议不要使用它。

<meta name="viewport" content="width=device-width, user-scalable=false;">