Bootstrap navbar охватывает контент по масштабированию

Question

Я создаю веб-сайт с классом navbar-fixed-top для navbar. Он отлично работает во всем, кроме случаев, когда я увеличиваю масштаб. Когда я увеличиваю масштаб на мобильном устройстве; navbar начинает обертывание и переходит к следующей строке после свертывания.

Однако я не хочу, чтобы навигатор был затронут при масштабировании, но в то же время сохранял отзывчивость для разных устройств.

Возможно ли это, или есть работа вокруг?

<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

Это путь сенсорных устройств обрабатывать позиции: фиксированная: она остается неподвижной, и покрывает остальную часть содержания.

Одно легко исправить, чтобы использовать видовых мета-тегов и отключить масштабирование пользователя:

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

Некоторые главные темы продажи администратора, построенные с Bootstrap сделать это. Это заставляет вашу страницу вести себя как приложение. Тем не менее, он замалчивает нормальное поведение пользователей при прикосновении, и большинство разработчиков не хотят задирать доступность, включая собственный сайт Bootstrap «GetBootstrap.com».

Другое - не использовать фиксированное положение, но использовать статическое положение на навигационной панели. GetBootstrap.com не использует фиксированную позицию navbar, она не следует за вами. На своих страницах документации афикс работает над боковой панелью. При масштабировании сенсорного устройства страница испортит макет. Это нормальное поведение на сенсорном устройстве. В большинстве случаев разработчик решил разрешить компоновку козыри доступа с точки зрения масштабирования при касании, то есть: они оставляют ее в покое, хотя она выглядит плохо и закрывает контент. Это то, что я делаю в эти дни.

Другие решения в комментарии @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

Вы можете совместить это с йе и использовать его только на сенсорных устройствах.