草庐IT

html - iPhone 6+ Mobile safari iOS 8 横向打开标签，Bootstrap navbar-fixed-top 在打开时不会关闭

coder 2023-08-05 原文

我在 iOS 8 上的 iPhone 6+ 移动 safari 横向浏览器中遇到了 Bootstraps navbar-fixed-top 的错误。该错误仅在其他选项卡打开时发生。

复制方法如下:
1) 转到 http://getbootstrap.com/examples/navbar-fixed-top/在横向的 iPhone 6+ 上——确保打开另一个标签页
2) 在不打开折叠的情况下向下滚动页面
3) 一旦 Safari 的状态栏(url 和标签)消失，打开导航栏
4) 向上滚动，以便带标签的 Safari 状态栏恢复
5)尝试关闭导航栏。

我在 iOS 7 中有这个错误，但能够通过添加视口(viewport) minimal-ui 元来修复它。我已经用最新版本的 iOS 8 测试了我的 iPhone 6+ 和 6+ iPhone 模拟器。看来标签是罪魁祸首，因为普通的 iPhone 6 没有这个问题，因为标签没有显示在状态栏上.我想这个错误不仅限于 Bootstrap，而且适用于顶部的任何固定元素。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="to-sticky navbar-fixed-top">
  <div class="nav-container">
    <div class="navbar">
      <div class="navbar-header">
        <a type="button" class="navbar-toggle btn-secondary btn" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      Main Menu
    </a>
      </div>
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav" role="menubar">
          <!--unless submenu-->
          <li class="active nav-home first-li ">
            <a href="/" role="menuitem">Home</a>
          </li>
          <li class="nav-dot nav-home">
            <img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
          </li>
          <!--if submenu-->
          <li class="dropdown   ">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle" role="button" aria-expanded="false">About<b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu">
              <li class="">
                <a href="/about" role="menuitem">Chair's Welcome</a>
              </li>
              <li class="">
                <a href="/about/history" role="menuitem">History</a>
              </li>
              <li class="">
                <a href="/about/campbell-hall" role="menuitem">Campbell Hall</a>
              </li>
              <li class="">
                <a href="/about/faqs" role="menuitem">FAQs</a>
              </li>
              <li class="">
                <a href="/about/jobs-and-fellowships" role="menuitem">Jobs &amp; Fellowships</a>
              </li>
              <li class="">
                <a href="/about/integrity-statement" role="menuitem">Integrity Statement</a>
              </li>
              <li class="">
                <a href="/about/contact" role="menuitem">Contact</a>
              </li>
            </ul>
          </li>
          <li class="nav-dot">
            <img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
          </li>
          <!--if submenu-->
          <li class="dropdown   ">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle" role="button" aria-expanded="false">People<b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu">
              <li class="hidden-xs  dropdown-submenu">
                <a href="/people/faculty" role="menuitem">Faculty<b class="caret"></b></a>
              </li>
              <!-- if submenu. repeats previous code but this will show ONLY on MOBILE to expose third tier navigation -->
              <li class="visible-xs  dropdown-submenu">
                <a href="#" class="trigger">Faculty<b class="caret"></b></a>
                <ul class="dropdown-menu sub-menu" role="menu">
                  <li class=" "><a href="/people/faculty/current" role="menuitem">Current</a>
                  </li>
                  <li class=" "><a href="/people/faculty/emeriti" role="menuitem">Emeriti</a>
                  </li>
                </ul>
              </li>
              <li class="">
                <a href="/people/researchers" role="menuitem">Researchers</a>
              </li>
              <li class="">
                <a href="/people/postdocs" role="menuitem">Postdocs</a>
              </li>
              <li class="">
                <a href="/people/visiting-scholars" role="menuitem">Visiting Scholars</a>
              </li>
              <li class="hidden-xs  dropdown-submenu">
                <a href="/people/graduate-students" role="menuitem">Graduate Students<b class="caret"></b></a>
              </li>
              <!-- if submenu. repeats previous code but this will show ONLY on MOBILE to expose third tier navigation -->
              <li class="visible-xs  dropdown-submenu">
                <a href="#" class="trigger">Graduate Students<b class="caret"></b></a>
                <ul class="dropdown-menu sub-menu" role="menu">
                  <li class=""><a href="/people/graduate-students/current" role="menuitem">Current</a>
                  </li>
                  <li class=""><a href="/people/graduate-students/alumni" role="menuitem">Alumni</a>
                  </li>
                </ul>
              </li>
              <li class="">
                <a href="/people/staff" role="menuitem">Staff</a>
              </li>
            </ul>
          </li>
          <li class="nav-dot">
            <img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
          </li>
          <!--if submenu-->
          <li class="dropdown   ">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle" role="button" aria-expanded="false">News &amp; Events<b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu">
              <li class="">
                <a href="/news" role="menuitem">Department News</a>
              </li>
              <li class="">
                <a href="/news/events" role="menuitem">Department Events</a>
              </li>
              <li class="">
                <a href="http://events.berkeley.edu/index.php/calendar/sn/astro" role="menuitem" class="external" target="_blank">Campus Calendar</a>
              </li>
              <li class="">
                <a href="/news/newsletters" role="menuitem">Newsletters</a>
              </li>
            </ul>
          </li>
          <li class="nav-dot">
            <img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
          </li>
          <!--if submenu-->
          <li class="dropdown   ">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle" role="button" aria-expanded="false">Academic Programs<b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu">
              <li class="hidden-xs  dropdown-submenu">
                <a href="/programs/undergraduate-program" role="menuitem">Undergraduate<b class="caret"></b></a>
              </li>
              <!-- if submenu. repeats previous code but this will show ONLY on MOBILE to expose third tier navigation -->
              <li class="visible-xs  dropdown-submenu">
                <a href="#" class="trigger">Undergraduate<b class="caret"></b></a>
                <ul class="dropdown-menu sub-menu" role="menu">
                  <li class=""><a href="/programs/undergraduate-program" role="menuitem">Undergraduate Overview</a>
                  </li>
                  <li class=""><a href="/programs/undergraduate-program/astrophysics-major" role="menuitem">Requirements of the Astrophysics Major</a>
                  </li>
                  <li class=""><a href="/programs/undergraduate-program/astrophysics-declaration" role="menuitem">Declaring the Major</a>
                  </li>
                  <li class=""><a href="http://admissions.berkeley.edu" role="menuitem" class="external" target="_blank">How to Apply</a>
                  </li>
                  <li class=""><a href="/programs/undergraduate-program/undergraduate-resources" role="menuitem">Undergraduate Resources</a>
                  </li>
                  <li class=""><a href="/programs/undergraduate-program/undergraduate-student-learning-initiative" role="menuitem">Undergraduate Student Learning Initiative</a>
                  </li>
                  <li class=""><a href="/programs/undergraduate-program/policy-on-academic-misconduct" role="menuitem">Policy on Academic Misconduct</a>
                  </li>
                </ul>
              </li>
              <li class="hidden-xs  dropdown-submenu">
                <a href="/programs/graduate-program" role="menuitem">Graduate<b class="caret"></b></a>
              </li>
              <!-- if submenu. repeats previous code but this will show ONLY on MOBILE to expose third tier navigation -->
              <li class="visible-xs  dropdown-submenu">
                <a href="#" class="trigger">Graduate<b class="caret"></b></a>
                <ul class="dropdown-menu sub-menu" role="menu">
                  <li class=""><a href="/programs/graduate-program" role="menuitem">Graduate Overview</a>
                  </li>
                  <li class=""><a href="/programs/graduate-program/graduate-requirements" role="menuitem">Degree Requirements</a>
                  </li>
                  <li class=""><a href="/programs/graduate-program/graduate-apply" role="menuitem">How to Apply</a>
                  </li>
                  <li class=""><a href="/programs/graduate-program/graduate-resources" role="menuitem">Graduate Resources</a>
                  </li>
                  <li class=""><a href="/programs/graduate-program/teaching-opportunities" role="menuitem">Teaching Opportunities</a>
                  </li>
                  <li class=""><a href="/programs/graduate-program/student-services" role="menuitem">Student Services</a>
                  </li>
                </ul>
              </li>
              <li class="hidden-xs  dropdown-submenu">
                <a href="/courses" role="menuitem">Courses<b class="caret"></b></a>
              </li>
              <!-- if submenu. repeats previous code but this will show ONLY on MOBILE to expose third tier navigation -->
              <li class="visible-xs  dropdown-submenu">
                <a href="#" class="trigger">Courses<b class="caret"></b></a>
                <ul class="dropdown-menu sub-menu" role="menu">
                  <li class="
                                                          
                                                          active 3">
                    <a href="/courses/undergraduate/2015/SU" role="menuitem">
                                                            
                                                            Summer
                                                            
                                                            2015
                                                            • Undergraduate
                                                          </a>
                  </li>
                  <li class="
                                                          
                                                          ">
                    <a href="/courses/undergraduate/2015/SP" role="menuitem">
                                                            Spring
                                                            
                                                            
                                                            2015
                                                            • Undergraduate
                                                          </a>
                  </li>
                  <li class="
                                                          
                                                          active 3">
                    <a href="/courses/graduate/2015/SU" role="menuitem">
                                                            
                                                            Summer
                                                            
                                                            2015
                                                            • Graduate
                                                          </a>
                  </li>
                  <li class="
                                                          
                                                          ">
                    <a href="/courses/graduate/2015/SP" role="menuitem">
                                                            Spring
                                                            
                                                            
                                                            2015
                                                            • Graduate
                                                          </a>
                  </li>
                </ul>
              </li>
              <li class="">
                <a href="/programs/financial-aid" role="menuitem">Financial Aid</a>
              </li>
              <li class="">
                <a href="/programs/student-awards" role="menuitem">Student Prizes and Awards</a>
              </li>
            </ul>
          </li>
          <li class="nav-dot">
            <img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
          </li>
          <!--if submenu-->
          <li class="dropdown   ">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle" role="button" aria-expanded="false">Prospective Students<b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu">
              <li class="">
                <a href="/prospective-students" role="menuitem">Why Berkeley Astronomy</a>
              </li>
              <li class="">
                <a href="/prospective-students/tuition" role="menuitem">Tuition</a>
              </li>
              <li class="">
                <a href="/prospective-students/unex-and-summer-sessions" role="menuitem">UNEX and Summer Sessions</a>
              </li>
              <li class="">
                <a href="/prospective-students/about-berkeley" role="menuitem">About Berkeley</a>
              </li>
              <li class="">
                <a href="/prospective-students/diversity-statement" role="menuitem">Statement on Diversity</a>
              </li>
            </ul>
          </li>
          <li class="nav-dot">
            <img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
          </li>
          <!--if submenu-->
          <li class="dropdown   ">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle" role="button" aria-expanded="false">Research &amp; Facilities<b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu">
              <li class="">
                <a href="/research-facilities" role="menuitem">Facilities</a>
              </li>
              <li class="">
                <a href="/research-facilities/organized-research-units" role="menuitem">Organized Research Units</a>
              </li>
              <li class="">
                <a href="/research-facilities/research-opportunities" role="menuitem">Research Opportunities</a>
              </li>
              <li class="">
                <a href="/research-facilities/projects" role="menuitem">Projects</a>
              </li>
              <li class="">
                <a href="/research-facilities/labs" role="menuitem">Labs</a>
              </li>
              <li class="">
                <a href="/research-facilities/libraries" role="menuitem">Libraries</a>
              </li>
            </ul>
          </li>
          <li class="nav-dot">
            <img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
          </li>
          <!--if submenu-->
          <li class="dropdown   ">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle" role="button" aria-expanded="false">Department Resources<b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu">
              <li class="">
                <a href="/department-resources" role="menuitem">Forms and Documents</a>
              </li>
              <li class="">
                <a href="/department-resources/astronomy-computing-services" role="menuitem">Computing at Berkeley Astronomy</a>
              </li>
              <li class="">
                <a href="/department-resources/campus-services" role="menuitem">Campus Shared Services</a>
              </li>
              <li class="">
                <a href="/department-resources/access-and-building" role="menuitem">Access &amp; Building</a>
              </li>
              <li class="">
                <a href="/department-resources/hosting-visitors" role="menuitem">Hosting Speakers &amp; Visitors</a>
              </li>
              <li class="">
                <a href="/department-resources/building-procedures" role="menuitem">Building Procedures</a>
              </li>
              <li class="">
                <a href="/department-resources/campus-resources" role="menuitem">Campus Resources</a>
              </li>
            </ul>
          </li>
          <li class="nav-dot">
            <img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
          </li>
          <!--if submenu-->
          <li class="dropdown   last-li">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle" role="button" aria-expanded="false">Friends &amp; Fans<b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu">
              <li class="">
                <a href="/astronomy-fans" role="menuitem">Outreach</a>
              </li>
              <li class="">
                <a href="/astronomy-fans/make-a-gift" role="menuitem">Make A Gift</a>
              </li>
              <li class="">
                <a href="/astronomy-fans/ask-an-astronomer" role="menuitem">Ask an Astronomer</a>
              </li>
              <li class="">
                <a href="/astronomy-fans/local-resources" role="menuitem">Local Resources</a>
              </li>
              <li class="">
                <a href="/astronomy-fans/merchandise" role="menuitem">Department Merchandise</a>
              </li>
            </ul>
          </li>
        </ul>
        <form action="/search" class="search_form visible-xs navbar-form navbar-right" method="post" role="search">
          <div class="input-group">
            <input class="form-control input-sm search_text" name="search_text" type="text" placeholder="">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-color btn-sm"><span class="glyphicon glyphicon-search"></span><span class="sr-only">Search</span>
            </button>
            </span>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

我还没有找到解决方法。有什么想法吗？

最佳答案

如果我理解正确，只要横向选项卡打开，就会出现此问题。您将无法打开/关闭移动菜单。

我设法通过解决方法修复了它:

  1. 制作一个关于切换按钮大小的绝对定位 div(在本例中为 #ios_menu_fix)。
  2. 在 css 中，将其对齐到固定导航菜单中切换按钮所在的位置。确保它设置了 z-index 和 -webkit-transform: translate3d(0,0,0);修复向上滚动时的 ios z-index 问题。

  3. 每次滚动页面时，将顶部设置为页面滚动高度，如下所示:

    $(window).on('scroll',function() {
$("#ios_menu_fix").css("top", $(document).scrollTop()+"px");
});

  4. 单击#ios_menu_fix 时打开/关闭菜单

    $(".nav-collapse").collapse('hide');
$(".nav-collapse").collapse('show');

您可以像这样检查菜单是否打开:

    var toggle = $(".nav-collapse").is(":visible");
    if (toggle) {
        $(".nav-collapse").collapse('hide');
    }
    else {
        $(".nav-collapse").collapse('show');
    }

这是一个丑陋的解决方案，但我目前发现唯一一个不会破坏其他移动浏览器和布局的解决方案。

这些代码示例使用 JQuery。

关于html - iPhone 6+ Mobile safari iOS 8 横向打开标签，Bootstrap navbar-fixed-top 在打开时不会关闭，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29781020/

开时navbar-fixed-top34gtlthtmlcsstwitter-bootstrapmobilemobile-safari

有关html - iPhone 6+ Mobile safari iOS 8 横向打开标签，Bootstrap navbar-fixed-top 在打开时不会关闭的更多相关文章

  1. ruby - 在院子里用@param 标签警告 - 2

    我试图使用yard记录一些Ruby代码，尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么？

  2. ruby - 如何关闭 ruby​​ gem "Spreadsheet?"中的文件 - 2

    下面的代码在我第一次运行它时就可以正常工作:require'rubygems'require'spreadsheet'book=Spreadsheet.open'/Users/me/myruby/Mywks.xls'sheet=book.worksheet0row=sheet.row(1)putsrow[1]book.write'/Users/me/myruby/Mywks.xls'当我再次运行它时，我会收到更多消息，例如:/Library/Ruby/Gems/1.8/gems/spreadsheet-0.6.5.9/lib/spreadsheet/excel/reader.rb:11

  3. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  4. ruby-on-rails - Ruby 的 'open_uri' 是否在读取或失败后可靠地关闭套接字？ - 2

    一段时间以来，我一直在使用open_uri下拉ftp路径作为数据源，但突然发现我几乎连续不断地收到“530抱歉，允许的最大客户端数(95)已经连接。”我不确定我的代码是否有问题，或者是否是其他人在访问服务器，不幸的是，我无法真正确定谁有问题。本质上，我正在读取FTPURI:defself.read_uri(uri)beginuri=open(uri).readuri=="Error"?nil:urirescueOpenURI::HTTPErrornilendend我猜我需要在这里添加一些额外的错误处理代码...我想确保我采取一切预防措施来关闭所有连接，这样我的连接就不是问题所在，但是我

  5. ruby - Faye WebSocket，关闭处理程序被触发后重新连接到套接字 - 2

    我有一个super简单的脚本，它几乎包含了FayeWebSocketGitHub页面上用于处理关闭连接的内容:ws=Faye::WebSocket::Client.new(url,nil,:headers=>headers)ws.on:opendo|event|p[:open]#sendpingcommand#sendtestcommand#ws.send({command:'test'}.to_json)endws.on:messagedo|event|#hereistheentrypointfordatacomingfromtheserver.pJSON.parse(event.d

  6. ruby - 如何用 Nokogiri 解析连续的标签？ - 2

    我有这样的HTML代码:Label1Value1Label2Value2...我的代码不起作用。doc.css("first").eachdo|item|label=item.css("dt")value=item.css("dd")end显示所有首先标记，然后标记标签，我需要“标签:值” 最佳答案 首先，您的HTML应该有和中的元素:Label1Value1Label2Value2...但这不会改变您解析它的方式。你想找到s并遍历它们，然后在每个你可以使用next_element得到;像这样:doc=Nokogiri::HTML(

  7. ruby-on-rails - 在 Label 标签中嵌套 Ruby on Rails HAML 复选框 - 2

    我有以下不起作用的代码:=form_for(resource,:as=>resource_name,:url=>session_path(resource_name),:html=>{:class=>"well"})do|f|=f.label:email=f.email_field:email=f.label:password=f.password_field:password-ifdevise_mapping.rememberable?%p=f.label:remember_me,:class=>"checkbox"=f.check_box:remember_me,:class=>"

  8. ruby - 如何在 watir 测试套件结束时关闭浏览器？ - 2

    使用ruby​​的watir测试网络应用程序时，浏览器最后会保持打开状态。网上的一些建议是，要进行真正的单元测试，您应该在每次测试时(在拆卸调用中)打开和关闭浏览器，但这很慢而且毫无意义。或者他们做这样的事情:defself.suites=superdefs.afterClass#Closebrowserenddefs.run(*args)superafterClassendsend但这会导致摘要输出不再显示(诸如“100次测试、100次断言、0次失败、0次错误”之类的内容仍应显示)。我怎样才能让ruby​​或watir在我的测试结束时关闭浏览器？ 最佳答案

  9. ruby - 如何使用 Nokogiri::XML::Builder 生成动态标签？ - 2

    我正在遍历数组中的一组标签名称，我想使用构建器打印每个标签名称，而不是求助于“我认为:builder=Nokogiri::XML::Builder.newdo|xml|fortagintagsxml.tag!tag,somevalendend会这样做，但它只是创建名称为“tag”的标签，并将标签变量作为元素的文本值。有人可以帮忙吗？这个看起来应该比较简单，我刚刚在搜索引擎上找不到答案。我可能没有以正确的方式提问。 最佳答案 尝试以下操作。如果我没记错的话，我添加了一个根节点，因为Nokogiri需要一个。builder=Nokogi

  10. ruby-on-rails - 如何在一段时间后关闭 Rails 闪现消息？ - 2

    我想设置秒数aflash在自动关闭之前向用户显示通知。 最佳答案 您可以在页面上使用一些简单的JavaScript(在此示例中使用jQuery):$('document').ready(function(){setTimeout(function(){$('#flash').slideUp();},3000);});假设保存您的flash消息的HTML元素的id是#flash，这将向上滑动并在3000毫秒(3秒)后将其隐藏。 关于ruby-on-rails-如何在一段时间后关闭Rails

随机推荐