Android Web Development...Div width (more likely inner text) is changing in pixels based on device zoom.

Question

I developed an application that interfaces with an institution's emergency alert system. How it works is, when there is an alert, on all of the institution's web pages it displays a scrolling marquee at the top of the page that is put there by javascript using protoype and scriptaculous.

All of this works perfectly on desktop browsers (IE6-8, Chrome, Safari, Firefox, Opera). It also works well on iPhones. My only problem is the rendering on Android.

In researching the problem initially, I found a CSS Property for mobile devices (namely webkit) -webkit-text-size-adjust, that keeps mobile devices from resizing text when zooming and changing screen orientation. I have set this property to 'none' as stated by many articles.

Below is a picture of screen shots from an Android emulator. The left screen shot shows 1x magnification of the page. The spacing between each of the messages is as it should be. The right screen shot shows the page zoomed in. The messages overlap, as the text size is rendered differently, and the div width is not wide enough to contain the text.

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

Here is the code that places the div on the 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 );

Is there something I am missing?

I will keep researching the problem in the time being. Thanks to everyone who read all of this.

---

A brief update...after more testing, it appears that the problem isn't necessarily based on zoom. It looks as if the problem is the viewport. I tested some really long text, and even zoomed all the way out, it has overlapped. It seems as though the div containing the text will not size itself greater than the window.

---

Here is an example of the code in action:

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

Answer 1

Have you tried it on a real device? Never trust the emulator there's no testing like real device testing :-)

Answer 2

Try setting a width to limit div's size (you will also need to set position: relative) and set overflow: hidden, so the text won't go beyond div's size

Answer 3

Could you post a link to a demo-page where this problem occurs? I tried reproducing it on my Milestone, but couldn't.