Bootstrap导航栏覆盖缩放内容

我正在建立一个导航栏的navbar-fixed-top类的网站。除了当我放大时，它在任何情况下都可以正常工作。当我放大移动设备时，导航栏开始打包并在折叠后进入下一行。Bootstrap导航栏覆盖缩放内容

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

这是可能的还是有解决方法？

<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 -->

来源

2014-12-05 user782400

可能的重复[禁用缩放在div上，但允许在页面上放大缩小（另一个div）]（http://stackoverflow.com/questions/13886763/disable-zoom-on-a-div-but- allow-zoom-on-the-page-an-alternate-div） – Sebsemillia 2014-12-05 16:36:30

这是正路触摸设备上处理的位置是：固定的：它总是保持不变，涵盖了内容的其余部分。

一个简单的解决方法是使用视meta标签和禁用用户比例：

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

与引导建立了一些最畅销的管理主题，做到这一点。它使你的页面像一个应用程序。然而，它触发了用户触摸时的正常行为，大多数开发人员不想搞砸可访问性，包括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

你可以用DET结合本触摸并仅在触摸设备上使用它。

来源

2014-12-06 16:14:44 Christina

不错的彻底回复......我相信开发者不打算让固定职位像预期的那样工作。 – 2014-12-09 00:31:06

Bootstrap导航栏覆盖缩放内容

回答

相关问题