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.
- Cambiar la actividad con javaScript en Android
- En la aplicación meteor como agregar orgin = * en cordova config.xml?
- Depurar javascript en android emulador con phonegap
- Cordova / Phonegap bloquea el código de la aplicación de origen para no ser editado / hackeado
- Obtener el valor del botón de radio cuando se hace clic en el botón no funciona angularjs
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/
- Integración de Facebook en aplicaciones móviles multiplataforma
- Soporte de lienzo HTML5 y vista Web de Android
- Javascript no funciona en una actividad de WebView
- Phonegap obtener contenido de un archivo PDF
- Angular y ionicPush no funciona en android
- Abrir aplicación de Android a través de vínculo profundo si está instalado o volver a la web si no está instalado
- ¿Qué debo tener en cuenta al portar javascript mousedown / mouseup / mousemove / keypress oyentes a móviles?
- ¿Hay alguna manera de interceptar JavaScript activado URL en webview?
¿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