Navegador predeterminado de Android que no se desplaza por la página web

Question

Tengo un problema con el navegador Android estándar en una página que estoy creando. En pocas palabras, la página no se desplazará verticalmente sin acercarse primero. Pensé que lo había descubierto cuando me di cuenta de que la etiqueta informaba una altura menor que la ventana del navegador, pero solucionar eso no solucionó el problema del desplazamiento. (El cuadro negro en la página de índice informa la altura calculada del elemento.)

Mi dispositivo de prueba es un Android increíble con Android 2.3. El desplazamiento funciona en Firefox para Android, así como en mi tableta Android 4.0 y todos los dispositivos iOS.

Mi acumulación dev del sitio está aquí: www.adamjdesigns.info/csu/engage

EDITAR - Otro código que he intentado:

1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
2. if(navigator.userAgent.match(/Android 2/) && $(window).height() < 600) { $('html').css({'height':$(window).height(),'overflow':'auto'}); }

Cualquier ayuda es muy apreciada!

Answer 1

lo he descubierto! Hubo un iframe para un video de YouTube en la página, y no estoy seguro de si es el iframe en sí o las secuencias de comandos relacionadas para reproducir el video dentro de él, pero eliminar eso del DOM resolvió el problema. (Lo tuve configurado para oculto en pantallas móviles de todos modos.)

¡Gracias por su ayuda, a todos!

Answer 2

probar esto por la ventana gráfica:

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

Answer 3

Aunque es un truco, tengo otra solución que podría ayudar a los desarrolladores. Descubrí que con el navegador stock Android 2.3.4, si uno aumenta el tamaño de carga de la página inicial de "1" a un tamaño ligeramente mayor, el desplazamiento vertical funciona sin tener que pellizcar primero. Por ejemplo:

<meta name="viewport" content="width=device-width, initial-scale=1.02" /> 

Answer 4

Lo que me pareció que era el problema era que había agregado overflow-x: hidden; a mi etiqueta corporal Esto debería apagar la barra de desplazamiento horizontal, pero en lugar de Android desactiva el desplazamiento vertical. Y en Android, puedo desplazarme horizontalmente solamente. Probablemente un error en el navegador de Android. Estoy usando viejos teléfonos Android (HTC Thunderbolt). Revisé mi archivo css y eliminé todo overflow-x: hidden y ahora puedo desplazarme verticalmente de nuevo.

Answer 5

FWIW, estaba teniendo un problema similar con mi página web que no se desplaza en Android 2.3. Utilicé la respuesta de Gatsby con un código de Javascript condicional para solucionar el problema. Aquí está mi código final:

<meta name="viewport" content="width=device-width, initial-scale=1.00"/> 
<script type="text/javascript"> 
    window.onload=function(){ 
     var ua = navigator.userAgent; 
     if(ua.indexOf("Android")>=0){ 
      var androidversion=parseFloat(ua.slice(ua.indexOf("Android")+8)); 
      if(androidversion<=2.3){ 
       document.getElementsByName("viewport")[0].setAttribute("content","width=device-width, initial-scale=1.02"); 
      } 
     } 
    }; 
</script> 

Esta solución establece por primera vez la etiqueta de la ventana gráfica meta normal, que funciona muy bien con la mayoría de dispositivos, a continuación, utiliza javascript condicional para detectar la versión androide y cambiar el contenido de la etiqueta meta con respecto al valor "hackeado" (proporcionado por Gatsby) que permite el desplazamiento en Android < = 2.3. Esto evita el desplazamiento horizontal innecesario para los dispositivos que no necesitan el hack.