jquery - Bootstrap 导航栏覆盖缩放内容

Question

我正在为导航栏构建一个带有 navbar-fixed-top 类的网站。它在除了放大时之外的所有内容上都运行良好。当我在移动设备上放大时；导航栏开始换行并在折叠后转到下一行。

但是，我不希望导航栏在放大时受到影响，但同时保持对不同设备的响应能力。

这可能吗，或者有解决办法吗？

<nav class="navbar navbar-default navbar-static-top lato-reg" id="navMenu">
    <div class="container">
      <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="index.html"><img src=""></a>
  </div>
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
      <li class="hidden">
        <a href="#page-top"></a>
      </li>
      <li class="page-scroll">
        <a href="index.html">Work</a>
      </li>
      <li class="page-scroll">
        <a href="index.html">Writings</a>
      </li>
      <li class="page-scroll">
        <a href="index.html">About</a>
      </li>

    </ul>
  </div>
</div>
<!-- /.container-fluid -->

Answer 1

这是触摸设备处理位置的方式:固定:它保持固定并覆盖其余内容。

一个简单的修复方法是使用视口(viewport)元标记并禁用用户缩放:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

一些使用 Bootstrap 构建的最畅销的管理主题可以做到这一点。它使您的页面表现得像一个应用程序。然而，它破坏了用户在触摸时的正常行为，并且大多数开发人员不想破坏可访问性，包括 Bootstrap 自己的网站“GetBootstrap.com”。'

另一种是不使用固定位置，而是使用导航栏上的静态位置。 GetBootstrap.com 不使用固定位置导航栏，它不会跟随您浏览页面。在他们的文档页面上，该词缀在侧边栏上起作用。当您放大触摸设备时，页面会弄乱布局。这是触摸设备上的正常行为。大多数时候，我已经对此进行了广泛的研究，开发人员决定在触摸缩放方面允许可访问性胜过布局，也就是说:即使它看起来很糟糕并且掩盖了内容，他们也不去管它。这就是我这些天正在做的事情。

@Sebsemilla 评论中的其他解决方案值得探索，但涉及媒体查询的解决方案几乎毫无用处。媒体查询检测宽度、高度、方向和像素密度，但它们不会检测人是否正在使用触摸设备。

通常，根据具体情况，我使用 JavaScript 检测触摸或非触摸，并为非触摸设备提供position:fixed，在触摸设备上提供position:absolute、position:static 或position:relative。有些人(很少有人)对此说过一些话，但在固定位置按照您的预期工作之前，我认为位置:固定是非触摸设备的渐进增强

另一个想法是用 jQuery 假装固定位置:

What is the simplest jQuery way to have a 'position:fixed' (always at top) div?

与 http://benalman.com/projects/jquery-throttle-debounce-plugin/ 一起使用

这是我设置的演示:https://jsbin.com/nugibi/2/edit?html,css,js,output

您可以将其与检测触摸结合起来，并仅在触摸设备上使用它。