Desarrollo web de Android … El ancho de Div (texto interior más probable) está cambiando en píxeles en función del zoom del dispositivo

Desarrollé una aplicación que interactúa con el sistema de alerta de emergencia de una institución. Cómo funciona es, cuando hay una alerta, en todas las páginas web de la institución que muestra una marquesina de desplazamiento en la parte superior de la página que se pone allí por javascript mediante protoype y scriptaculous.

Todo esto funciona perfectamente en los navegadores de escritorio (IE6-8, Chrome, Safari, Firefox, Opera). También funciona bien en iPhones. Mi único problema es la representación en Android.

Al investigar el problema inicialmente, encontré una propiedad CSS para dispositivos móviles (es decir, webkit) -webkit-text-size-adjust, que evita que los dispositivos móviles redimensionen el texto al cambiar de tamaño y cambiar la orientación de la pantalla. He establecido esta propiedad a 'ninguno' como se indica en muchos artículos.

A continuación se muestra una imagen de capturas de pantalla de un emulador de Android. La captura de pantalla izquierda muestra una ampliación de la página. El espaciamiento entre cada uno de los mensajes es como debe ser. La captura de pantalla derecha muestra la página ampliada. Los mensajes se superponen, ya que el tamaño del texto se representa de forma diferente y el ancho de la div no es lo suficientemente ancho como para contener el texto.

Http://www.themonkeyonline.com/spacing-example.jpg

Aquí está el código que coloca la div en la página:

var marquee = new Element( 'div', { 'id' : 'marquee' + marquee_counter } ) .setStyle( { 'display' : 'block' , 'WebkitTextSizeAdjust' : 'none' , 'fontSize' : '12px' , 'lineHeight' : '25px' , 'left' : $( marquee_container ).getDimensions().width + 'px' } ) .addClassName( 'marquee_text' ) .update( marquee_text ); $( marquee_container ).insert( marquee ); 

¿Hay algo que me falta?

Voy a seguir investigando el problema en el momento. Gracias a todos los que leen todo esto.


Una breve actualización … después de más pruebas, parece que el problema no se basa necesariamente en el zoom. Parece que el problema es la ventana de visualización. He probado algún texto muy largo, e incluso zoom todo el camino, se ha superpuesto. Parece como si el div que contiene el texto no se tamaño más grande que la ventana.


He aquí un ejemplo del código en acción:

Http://elliottr.www-dev.seminolestate.edu/alert/

¿Podría publicar un enlace a una página de demostración en la que se produce este problema? Traté de reproducirlo en mi Milestone, pero no pude.

Trate de establecer un ancho para limitar el tamaño de div (también tendrá que establecer la posición: relativo) y establecer el desbordamiento: ocultos, por lo que el texto no va más allá del tamaño de div

  • JavaScript / HTML5 audio: reproduce el archivo mp3 cargado por el usuario mediante el selector de archivos en Android Chrome
  • Android establece scrollLeft al actualizar contenido en el evento de desplazamiento no actualiza la posición de la barra de desplazamiento
  • Aplicación web de pantalla completa para Android
  • diferencia entre cocos2d-x vs cocos2d-js
  • ¿Necesito agregar app.initialize () en todos mis archivos html en un proyecto cordova / phonegap
  • Límite de uso del mapa Google V3 en las aplicaciones Phonegap
  • ¿Cómo navegar desde una página web a una página local en mi aplicación de teléfono?
  • Haga clic en Eventos que no funcionan en Nexus S ICS (4.0.4) en Todos los navegadores
  • Pasar y devolver los valores de javascript y android y utilizarlos como plugin de brecha de teléfono
  • JQuery móvil deshabilitar el contenido de la página desplazamiento vertical
  • Javascript para detectar el ancho de la pantalla del navegador móvil?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.