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/

Rew

Answer 1

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

Manual

I setup a test page on my dev subweb: elliottr.www-dev.seminolestate.edu/alert – Rew

This is strange. It works as it should on my Milestone running Android 2.1 in horizontal and vertical mode and irrespective of zoom-level. – Manual

Thank you Daniel. The 'WebkitTextSizeAdjust' appears to be working as advertised in 2.1. Strange, I tested it on an EVO the other day and it had the same issue. However, I just tested it on a DROID, and it was working properly. – Rew

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

Spoony

I tested setting a width on the DIVs. I still had the same issue. Even though in the real world application for the system, setting absolute widths on the DIVs is not a viable option. The DIVs are positioned absolutely inside of a relatively positioned element. This is what allows scriptaculous to "scroll" them across the screen. – Rew

Applying overflow:hidden to the divs would in theory work. However, since the text is variable width, this is not a real world solution to this application. – Rew