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

发布于 2024-12-13 03:12:51 字数 199 浏览 1 评论 0原文

我的 jquery 移动网络应用程序遇到以下问题。

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

非常感谢您的帮助。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

樱＆纷飞 2024-12-20 03:12:51

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

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

Try putting this meta tag in your header. It might fix your problem:

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

回复收藏 0 原文

柠栀 2024-12-20 03:12:51

使用 javascript 或 css 不可能避免这种行为。检查此信息链接

回复收藏 0 原文

纸短情长 2024-12-20 03:12:51

对于使用 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让窗口以正确的高度重新绘制。

For anyone else experiencing this issue with android, I noticed the page would load in full without the meta viewport, so tried adding dynamically with a delay for android browsers to wait for keyboard to disappear.

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');
}

Change timeout duration as you like, but too short and it doesn't always work. Only problem is you get a flash of shorter content on android. Firing the orientationchange or resize events in order to repaint after keyboard has gone would be a better solution but I could not get the window to repaint at the correct height through JS.

回复收藏 0 原文