我有一个底部抽屉,它固定在底部.抽屉时,抽屉将向上滑动并显示更多内容.在iOS 7上,当用户点击输入标签或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',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],parseInt(v[3] || 0,10)];
}
}
var iosVersion = iOSversion();
if (navigator.userAgent.match('CriOS') && iosVersion[0] == '7') {
$(document).hammer().on('tap',function(e) {
$('body').addClass('chromefixfixed');
})
.on('blur',function(){
body.removeClass('chromefixfixed');
})
}
CSS代码：
.chromefixfixed #drawer {
display: none;
}
仍然存在的问题是：如何让iOS 7上的Chrome在Chrome上运行(在键盘启动时不隐藏抽屉)？
谢谢您的帮助！
