我有一个固定在底部的底部抽屉。点击时,抽屉将向上滑动并显示更多内容。在 iOS 7 上,当用户点击 input 标签或 textarea 标签时,会弹出虚拟键盘。但是,当键盘弹出时,抽屉会在页面上跳起来而不是粘在底部。请参阅下图以作说明。
我也是在 Safari 上第一次遇到这个问题,但我添加了以下代码以在键盘打开时将固定位置更改为绝对位置:
// Apple.Device detects if it is an apple device
if (Modernizr.touch && Apple.Device) {
/* cache dom references */
var $body = jQuery('body');
/* bind events */
$(document)
.on('focus', 'input, textarea', function(e) {
$body.addClass('fixfixed');
})
.on('blur', 'input, textarea', function(e) {
$body.removeClass('fixfixed');
});
}
CSS 代码:
.fixfixed #drawer {
bottom: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
left: 0;
right: 0;
}
此修复适用于 iOS 7 上的 Safari,但不适用于 Chrome。此外,还有一个奇怪的行为:
如果页面上有一个输入标签,我在 iPad 上点击它,虚拟键盘就会打开,抽屉就会跳起来。如果抽屉碰巧覆盖了我点击的内容,点击事件实际上会在抽屉上触发。这是为什么?
我该如何解决这个问题? (我已经搜索了一段时间,但如何在 iOS 上调试 Chrome?)
非常感谢您的帮助!
更新
我使用下面的代码来检测它是否是 iOS 7 上的 Chrome,如果是,我会在虚拟键盘启动时隐藏抽屉,并在虚拟键盘关闭时重新显示抽屉。
function iOSversion() {
if (/iP(hone|od|ad)/.test(navigator.platform)) {
// supports iOS 2.0 and later: <http://bit.ly/TJjs1V>
var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
}
}
var iosVersion = iOSversion();
if (navigator.userAgent.match('CriOS') && iosVersion[0] == '7') {
$(document).hammer().on('tap', 'input, textarea', function(e) {
$('body').addClass('chromefixfixed');
})
.on('blur', 'input, textarea', function(){
body.removeClass('chromefixfixed');
})
}
CSS 代码:
.chromefixfixed #drawer {
display: none;
}
问题仍然存在:如何让 iOS 7 上的 Chrome 像 Android 上的 Chrome 一样工作(键盘启动时不隐藏抽屉)?
感谢您的帮助!
最佳答案
Position fixed bottom 和 position absolute bottom 在 iOS 和 android 设备上绝对是噩梦,根据我的经验,即使在最现代的设备上也不可能让它一致地呈现,更不用说目前主导市场的旧设备了.如此之多,以至于作为开发人员,我会因此要求设计师重新考虑布局。我相信这叫做“回避粪便”。
关于iOS 7 Chrome - 当虚拟键盘弹出时,固定位置抽屉不会停留在底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19631652/