6

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

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

我的 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);
});
4

3 回答 3

2

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

于 2013-10-07T22:33:56.163 回答
1

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

也许您的问题是您实现 100% 高度的方式，是否有任何供应商特定的 css 或 JS 处理调整大小事件？

于 2013-10-07T21:54:48.800 回答
0

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

<meta name="viewport" content="width=device-width, user-scalable=false;">
于 2013-10-07T22:16:00.883 回答