iOS 7 Chrome – 当虚拟键盘d出时,固定位置抽屉不会停留在底部

概述我有一个底部抽屉,它固定在底部.抽屉时,抽屉将向上滑动并显示更多内容.在iOS 7上,当用户点击输入标签或textarea标签时,d出虚拟键盘.但是,当键盘d出时,抽屉会跳到页面上,而不是粘到底部.请参见下图进行说明. 我首先在Safari上遇到了问题,但是当键盘打开时,我添加了以下代码将固定位置更改为绝对位置： // Apple.Device detects if it is an apple 我有一个底部抽屉,它固定在底部.抽屉时,抽屉将向上滑动并显示更多内容.在iOS 7上,当用户点击输入标签或textarea标签时,d出虚拟键盘.但是,当键盘d出时,抽屉会跳到页面上,而不是粘到底部.请参见下图进行说明.

我首先在Safari上遇到了问题,但是当键盘打开时,我添加了以下代码将固定位置更改为绝对位置：

// Apple.Device detects if it is an apple deviceif (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上运行(在键盘启动时不隐藏抽屉)？

谢谢您的帮助！

解决方法 位置固定底部和位置绝对底部是iOS和AndroID设备上的绝对噩梦,根据我的经验,只有在最现代的设备上,连续渲染,更不用说现在主导市场的旧的设备,这是不可能的.所以,作为一个开发者,我会请设计师重新考虑布局,因为它.我相信它被称为“回头看”. 总结

以上是内存溢出为你收集整理的iOS 7 Chrome – 当虚拟键盘d出时,固定位置抽屉不会停留在底部全部内容，希望文章能够帮你解决iOS 7 Chrome – 当虚拟键盘d出时,固定位置抽屉不会停留在底部所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。