Bootstrap导航栏涵盖缩放内容

时间:2014-12-05 15:24:48

标签: jquery twitter-bootstrap twitter-bootstrap-3 navbar zooming

我正在为导航栏构建一个带有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 -->

1 个答案:

答案 0 :(得分:6)

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

一个简单的解决方法是使用视口元标记并禁用用户缩放:

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

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

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

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

通常情况下,根据具体情况,我会通过javascript检测触摸或不触摸并提供位置:固定非触摸设备和位置:绝对位置:静态位置:静态位置:位置:触摸设备上的相对位置。有些人,很少有人对此有所说明,但直到固定位置按预期工作,我才想到位置:固定为非触摸设备的渐进增强

另一个想法是使用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

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