响应式网页设计，在移动设备上拉起键盘搞砸了设计答案

【问题标题】：Responsive Web Design, Pulling Up Keyboard on Mobile Device Messes Up Design响应式网页设计，在移动设备上拉起键盘搞砸了设计
【发布时间】：2013-10-08 06:33:56
【问题描述】：

我为我的网站创建了响应式设计。它基于网站内容位于 div 中，该 div 高度为窗口的 100%。问题在于，当用户点击输入字段时，浏览器的大小会缩小以适应手机浏览器键盘和顶部 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);
});

【问题讨论】：

也许您可以使用 javascript 来检测输入字段何时获得焦点，然后将窗口的像素大小设置为焦点之前的大小，然后在字段未获得焦点时将其重置为自动？跨度>
请记住，并非所有移动设备类型都会这样做。
你设置视口高度的原因是什么？我从来没有在我的响应式设计中这样做过，也从来没有遇到过这个问题。
@CP510 是的，但有些确实如此。我想最大限度地提高兼容性。
@BrianRay 我以前也没有这样做过。这只是解决问题的一种尝试。我会删除它，它对我的问题没有任何影响。

标签： html css responsive-design

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

但是我的安卓设备上的 Firefox 可以——出于某种原因。我在 www.whatsmybrowsersize.com 上查看过，我可以确认大小肯定会发生变化。
我同意这是一种奇怪的行为。我会使用 jQuery 进行设置和重置，但这应该是不必要的步骤。
有趣，我要检查一下...但是哪个浏览器/平台会产生这种行为？

【解决方案3】：

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

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

【讨论】：