jquery - tooltip html
La barra de navegación de Bootstrap cubre el contenido en el zoom (1)
Estoy construyendo un sitio web con una barra de navegación fija para la barra de navegación. Funciona bien en todo, excepto cuando hago un acercamiento. Cuando acerco un dispositivo móvil; la barra de navegación comienza a envolver y va a la siguiente línea después de colapsar.
Sin embargo, no quiero que la barra de navegación se vea afectada al hacer zoom, pero al mismo tiempo mantener la capacidad de respuesta para diferentes dispositivos.
¿Es esto posible o hay una solución alternativa?
<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 -->
Esta es la forma en que los dispositivos táctiles manejan la posición: fija: permanece fija y cubre el resto del contenido.
Una solución sencilla es usar la metaetiqueta de la ventana gráfica y deshabilitar la escala del usuario:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
Algunos de los mejores temas de administración de ventas construidos con Bootstrap hacen esto. Hace que tu página se comporte como una aplicación. Sin embargo, daña el comportamiento normal de los usuarios al tocar y la mayoría de los desarrolladores no quieren estropear la accesibilidad, incluido el propio sitio de Bootstrap, "GetBootstrap.com".
El otro es no usar la posición fija, sino usar la posición estática en la barra de navegación. GetBootstrap.com no usa una barra de navegación de posición fija, no te sigue por la página. En sus páginas de documentación, el afijo está trabajando en la barra lateral. Cuando acerca un dispositivo táctil, la página daña el diseño. Este es un comportamiento normal en un dispositivo táctil. La mayoría de las veces, y he investigado esto extensamente, el desarrollador ha decidido permitir el diseño de acceso de prioridad con respecto al acercamiento al tacto, es decir: lo dejan solo aunque se vea mal y cubra el contenido. Esto es lo que estoy haciendo en estos días.
Las otras soluciones en el comentario de @Sebsemilla vale la pena explorar, pero la que involucra consultas de medios es bastante inútil. Las consultas de medios detectan el ancho, el alto, la orientación y la densidad de píxeles, pero no detectan si una persona usa o no un dispositivo táctil.
En general, dependiendo de la situación, detecto el tacto o no-tacto con javascript y posición de servicio: fijo para dispositivos no táctiles y posición: absoluta, o posición: estática, o posición: relativa en dispositivos táctiles. Algunas personas, muy pocas, dicen algo al respecto, pero hasta que la posición fija funcione como era de esperar, pienso en la posición: fijada como una mejora progresiva para dispositivos no táctiles.
Otra idea es falsificar la posición corregida con jQuery:
Úselo con http://benalman.com/projects/jquery-throttle-debounce-plugin/
Aquí hay una demostración que configuré: https://jsbin.com/nugibi/2/edit?html,css,js,output
Puede combinar esto con la detección táctil y usarlo solo en dispositivos táctiles.