Développement Web Android ... Largeur Div (texte intérieur plus probable) change en pixels en fonction du zoom de l'appareil

Question

J'ai développé une application qui s'interface avec le système d'alerte d'urgence d'une institution. Comment ça marche, quand il y a une alerte, sur toutes les pages web de l'institution, il affiche un rectangle de défilement en haut de la page qui est mis en javascript en utilisant protoype et scriptaculous.

Tout cela fonctionne parfaitement sur les navigateurs de bureau (IE6-8, Chrome, Safari, Firefox, Opera). Cela fonctionne également bien sur les iPhones. Mon seul problème est le rendu sur Android. En recherchant le problème initialement, j'ai trouvé une propriété CSS pour les appareils mobiles (à savoir webkit) -webkit-text-size-adjust, qui empêche les appareils mobiles de redimensionner le texte lors du zoom et de changer l'orientation de l'écran. J'ai mis cette propriété à «aucun» comme indiqué par de nombreux articles.

Vous trouverez ci-dessous une image des captures d'écran d'un émulateur Android. La capture d'écran de gauche montre un grossissement 1x de la page. L'espacement entre chacun des messages est comme il se doit. La capture d'écran de droite montre la page zoomée. Les messages se chevauchent, car la taille du texte est rendue différemment, et la largeur div n'est pas assez large pour contenir le texte.

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

est le code ici qui place la div sur la page:

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

Y at-il quelque chose que je suis absent?

Je continuerai de rechercher le problème dans l'immédiat. Merci à tous ceux qui ont lu tout ça. Une brève mise à jour ... après plus de tests, il apparaît que le problème n'est pas nécessairement basé sur le zoom. Il semble que le problème soit la fenêtre d'affichage. J'ai testé un texte vraiment long, et même zoomé complètement, il s'est chevauché. Il semble que la div contenant le texte ne se taille pas plus grande que la fenêtre.

---

Voici un exemple du code en action:

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

Answer 1

Pourriez-vous publier un lien vers une page de démonstration où ce problème se produit? J'ai essayé de le reproduire sur mon Milestone, mais je n'ai pas pu.

Answer 2

essayez de définir une largeur de limiter la taille de div (vous devrez également définir la position: relative) et trop-plein: caché , donc le texte ne dépassera pas la taille de div