android键盘显示后jQuery移动页脚或视口大小错误答案

【问题标题】：jQuery mobile footer or viewport size wrong after android keyboard showandroid键盘显示后jQuery移动页脚或视口大小错误
【发布时间】：2011-12-19 00:01:36
【问题描述】：

我在使用 jquery 移动 web 应用时遇到以下问题。

我的 jquery 应用程序有一个固定的页脚，但是当 android 键盘打开时（即单击浏览器栏并手动重新加载页面时），视口似乎只是从顶部（浏览器栏下方）向下到键盘的上边缘。然后页面重新加载并且视口的高度保持这个大小，所以当键盘再次隐藏时它太小了。再次隐藏键盘时如何强制调整大小？

非常感谢您的帮助。

【问题讨论】：

标签： jquery android mobile keyboard viewport

【解决方案1】：

尝试绑定到window 上的resize 事件

【讨论】：

是的，但是我应该在里面做什么？我已经尝试触发“orientationchange”，没有帮助。

【解决方案2】：

尝试将此元标记放在您的标题中。它可能会解决您的问题：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

【讨论】：

【解决方案3】：

使用 javascript 或 css 无法避免这种行为。请查看此信息 link

【讨论】：

【解决方案4】：

对于其他在 android 上遇到此问题的人，我注意到页面将在没有元视口的情况下完全加载，因此尝试动态添加延迟，以便 android 浏览器等待键盘消失。

var ua = navigator.userAgent.toLowerCase();
var isAndroid = /android/i.test(ua);
if(isAndroid) {
    setTimeout(function(){
        viewport = document.querySelector("meta[name=viewport]");
        viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
    },100);         
} else {
    viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
}

根据需要更改超时持续时间，但太短且并不总是有效。唯一的问题是您会在 android 上获得较短的内容。在键盘消失后触发orientationchange或resize事件以重新绘制将是一个更好的解决方案，但我无法通过JS让窗口在正确的高度重新绘制。

【讨论】：