草庐IT

iOS 7 Chrome - 当虚拟键盘弹出时，固定位置抽屉不会停留在底部

coder 2023-07-27 原文

我有一个固定在底部的底部抽屉。点击时，抽屉将向上滑动并显示更多内容。在 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/

抽屉Chrome39sectionioscssgoogle-chromecss-position

有关iOS 7 Chrome - 当虚拟键盘弹出时，固定位置抽屉不会停留在底部的更多相关文章

  1. ruby - 多次弹出/移动 ruby​​ 数组 - 2

    我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容？我基本上想做类似numbers.slice(0,3)的事情，但要删除切片中的数组项。嗯...嗯，我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby​​数组，我们在StackOverflow上找到一

  2. ruby - 如何验证 IO.copy_stream 是否成功 - 2

    这里有一个很好的答案解释了如何在Ruby中下载文件而不将其加载到内存中:https://stackoverflow.com/a/29743394/4852737require'open-uri'download=open('http://example.com/image.png')IO.copy_stream(download,'~/image.png')我如何验证下载文件的IO.copy_stream调用是否真的成功——这意味着下载的文件与我打算下载的文件完全相同，而不是下载一半的损坏文件？documentation说IO.copy_stream返回它复制的字节数，但是当我还没有下

  3. Ruby 文件 IO 定界符？ - 2

    我正在尝试解析一个文本文件，该文件每行包含可变数量的单词和数字，如下所示:foo4.500bar3.001.33foobar如何读取由空格而不是换行符分隔的文件？有什么方法可以设置File("file.txt").foreach方法以使用空格而不是换行符作为分隔符？ 最佳答案 接受的答案将slurp文件，这可能是大文本文件的问题。更好的解决方案是IO.foreach.它是惯用的，将按字符流式传输文件:File.foreach(filename,""){|string|putsstring}包含“thisisanexample”结果的

  4. Get https://registry-1.docker.io/v2/: net/http: request canceled while waiting - 2

    1.错误信息：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:requestcanceledwhilewaitingforconnection(Client.Timeoutexceededwhileawaitingheaders)或者：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:TLShandshaketimeout2.报错原因：docker使用的镜像网址默认为国外，下载容易超时，需要修改成国内镜像地址（首先阿里

  5. ruby - 在 Ruby 中将整数格式化为固定长度的字符串 - 2

    有没有一种简单的方法可以将给定的整数格式化为具有固定长度和前导零的字符串？#convertnumberstostringsoffixedlength3[1,12,123,1234].map{|e|???}=>["001","012","123","234"]我找到了解决方案，但也许还有更聪明的方法。format('%03d',e)[-3..-1] 最佳答案 如何使用%1000而不是进行字符串操作来获取最后三位数字？[1,12,123,1234].map{|e|format('%03d',e%1000)}更新:根据theTinMan的

  6. ruby - 为什么不能使用类IO的实例方法noecho？ - 2

    print"Enteryourpassword:"pass=STDIN.noecho(&:gets)puts"Yourpasswordis#{pass}!"输出:Enteryourpassword:input.rb:2:in`':undefinedmethod`noecho'for#>(NoMethodError) 最佳答案 一开始require'io/console'后来的Ruby1.9.3 关于ruby-为什么不能使用类IO的实例方法noecho？，我们在StackOverflow上

  7. ruby - 下载位置 Selenium-webdriver Cucumber Chrome - 2

    我将Cucumber与Ruby结合使用。通过Selenium-Webdriver在Chrome中运行测试时，我想将下载位置更改为测试文件夹而不是用户下载文件夹。我当前的chrome驱动程序是这样设置的:Capybara.default_driver=:seleniumCapybara.register_driver:seleniumdo|app|Capybara::Selenium::Driver.new(app,:browser=>:chrome,desired_capabilities:{'chromeOptions'=>{'args'=>%w{window-size=1920,1

  8. ruby - 如何在 Ruby 中返回整数的固定长度二进制表示？ - 2

    我知道我可以使用Fixnum#to_s将整数表示为二进制格式的字符串。但是1.to_s(2)生成1而我希望它生成00000001。我怎样才能使所有返回的字符串都以零作为填充到8个字符？我可以使用类似的东西:binary="#{'0'*(8-(1.to_s(2)).size)}#{1.to_s(2)}"if(1.to_s(2)).size但这看起来不是很优雅。 最佳答案 使用字符串格式。"%08b"%1#=>"00000001" 关于ruby-如何在Ruby中返回整数的固定长度二进制表示？

  9. ruby - 是否有 chrome 开关来抑制 'external protocol request' ？ - 2

    是否有chrome开关来抑制“外部协议(protocol)请求”？我正在使用selenium-ruby​​-watirwebdriver自动化应用程序。我在网上搜索了绕过此窗口和对话的解决方案:http://productforums.google.com/forum/#!topic/chrome/K22hXwRy6zQ概述了我们如何手动执行此操作。但是对于Selenium-Chrome-Ruby，我需要通过可能设置一个chrome开关(chorme开关列表:=http://src.chromium.org/svn/trunk/src/chrome/common/chrome_swit

  10. ruby - 运行测试时静音 Chrome 驱动程序控制台输出 - 2

    我使用的是最新版本的Chrome(32.0.1700.107)和Chrome驱动程序(V2.8)。但是当我在Ruby中使用以下代码运行示例测试时:require'selenium-webdriver'WAIT=Selenium::WebDriver::Wait.new(timeout:100)$driver=Selenium::WebDriver.for:chrome$driver.manage.window.maximize$driver.navigate.to'https://www.google.co.in'defapps_hoverele_hover=$driver.find_

随机推荐