Sviluppo Web Android ... Larghezza div (più probabile testo interno) cambia in pixel in base allo zoom del dispositivo

Question

Ho sviluppato un'applicazione che si interfaccia con il sistema di allarme di emergenza di un'istituzione. Come funziona, quando c'è un avviso, su tutte le pagine web dell'istituzione mostra una selezione scorrevole nella parte superiore della pagina che viene inserita da javascript usando protoype e scriptaculous.

Tutto ciò funziona perfettamente sui browser desktop (IE6-8, Chrome, Safari, Firefox, Opera). Funziona bene anche con gli iPhone. Il mio unico problema è il rendering su Android.

Nella ricerca iniziale del problema, ho trovato una proprietà CSS per dispositivi mobili (ovvero webkit) -webkit-text-size-adjust, che impedisce ai dispositivi mobili di ridimensionare il testo durante lo zoom e la modifica dell'orientamento dello schermo. Ho impostato questa proprietà su "nessuno" come indicato da molti articoli.

Di seguito è riportata un'immagine delle schermate di un emulatore Android. La schermata di sinistra mostra 1x ingrandimento della pagina. La spaziatura tra ciascuno dei messaggi è come dovrebbe essere. La schermata di destra mostra la pagina ingrandita. I messaggi si sovrappongono, in quanto la dimensione del testo viene renderizzata in modo diverso e la larghezza div non è sufficientemente ampia da contenere il testo.

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

Qui è il codice che pone l'div sulla pagina:

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); 

C'è qualcosa che mi manca?

Continuerò a cercare il problema al momento. Grazie a tutti quelli che hanno letto tutto questo.

---

Un breve aggiornamento ... dopo ulteriori test, sembra che il problema non sia necessariamente basato sullo zoom. Sembra che il problema sia il punto di vista. Ho provato un testo molto lungo e, anche ingrandito, si è sovrapposto. Sembra che il div che contiene il testo non si dimensionerà più della finestra.

---

Ecco un esempio del codice in azione:

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

Answer 1

Potresti pubblicare un collegamento a una pagina di prova in cui si verifica questo problema? Ho provato a riprodurlo sul mio Milestone, ma non potevo.

Answer 2

provare a impostare una larghezza di limitare le dimensioni del div (sarà necessario anche impostare position: relative) e impostare overflow: hidden , quindi il testo non andrà oltre la dimensione div