javascript - para - plantillas divi

El mejor método para determinar si la ventana gráfica o el navegador "estándar"

Question

Entonces, todos sabemos que iOS Mobile Safari usa viewports (al igual que el navegador de Android), en lugar de una ventana de navegador ''estándar''. Y esto causa problemas con overflow:hidden , y position:fixed .

Desafortunadamente, este es el mismo caso con el iPad. Supongo que este es el caso de otras tabletas con Android también.

En lugar de husmear en el navegador cada vez, ¿hay alguna manera fácil de determinar si el navegador tiene una ventana gráfica o si es estándar?

Answer 1

Pruebe las consultas de medios: puede incluir hojas de estilo o aplicar partes de una hoja de estilo de forma condicional, en función de las dimensiones del dispositivo y la ventana gráfica que informa el navegador.

Este artículo ofrece una introducción bastante decente: http://www.alistapart.com/articles/responsive-web-design/

Answer 2

Desafortunadamente, actualmente no hay una buena solución para la falta de soporte de los navegadores móviles para la position:fixed . En primer lugar, la position:fixed razón position:fixed " está "roto" porque, entre otras cosas, ningún proveedor de navegador sabe exactamente cómo manejar lo que ocurre cuando se acerca el documento. Si tiene algo de tiempo para leer un poco, le recomiendo los siguientes artículos, que explicarán las vistas de los navegadores y los problemas que rodean el posicionamiento fixed en el móvil con gran detalle:

• Una historia de dos ventanas gráficas, segunda parte , cómo funcionan las ventanas gráficas y el problema de los navegadores móviles. (Si no está familiarizado con las ventanas gráficas en los navegadores de escritorio o desea la información de fondo, consulte también la primera parte ).
• El quinto valor de posición hace un trabajo fantástico al explicar los problemas que rodean la position:fixed en un navegador móvil, y sugiere que podríamos necesitar un nuevo valor de position , el device-fixed .

Esos artículos le darán el por qué , pero no la forma de solucionarlo . Para una posición verdaderamente fixed , estás en su mayoría sin suerte. Sin embargo, si su objetivo es tener una barra de herramientas fija debajo del contenido de desplazamiento, existen algunas formas de piratearla. Tuve éxito con iScroll .

Editar: La forma correcta de determinar si se está ejecutando en un dispositivo táctil es la siguiente detección de características:

var isTouch = (''ontouchstart'' in window);

ontouchstart es un evento disparado en Safari móvil y el navegador Android . No está presente en los navegadores de escritorio, donde puede usar overflow:auto y tener barras de desplazamiento regulares. Si isTouch es verdadero, puede usar iScroll.