Android Browser Problems

I was working on a really simple application this weekend for a friend. We had talked about basically making him a digital business card that his customers could install on their mobile phones. I thought this would be another great opportunity to highlight the cross platform development benefits of PhoneGap. So I jumped in and we did a quick mockup of his app including how it would look in portrait (upright) and landscape (sideways) views.

I quickly laid out the application in html and got it looking much like I wanted. The crux of this design we picked out was that we were to a green border around that was about 5px wide and always 10px from the edges of the screen. I was testing this on my Nexus One and despite all the CSS I tried I was having trouble getting this to lay out the way I wanted. I remembered that height in CSS has always been a bit of an issue, so I thought I would just watch the orientation change and check the height of the window with JS. The first issue with this, is that Webkit on Android does not support the orientation change event. Which is only a minor hurdle because we can watch for resize and fake it. But what I found was that despite watching for several different height properties, after loading the application in portrait mode, switching to landscape and then back to portrait, the values for height and width had changed. I expect them to change between portrait and landscape, but not portrait to portrait.

To demonstrate this issue, I created this page http://blog.simb.net/m.html. If you have an android device running 2.2 (Froyo) please feel free to follow these directions.

1. Open the browser on your phone
2. With your phone upright (portrait), Navigate to http://blog.simb.net/m.html
3. Take note of the values for innerWidth and innerHeight
4. Turn the phone to landscape, again take note of the values for innerWidth and innerHeight
5. Now turn the phone back to portrait, notice that the values for innerWidth and innerHeight are different from step 3

While I only have a Nexus One running 2.2 I had a couple friends load this page and confirm the behavior on both the Evo and the Droid 2.

Now the really interesting thing is that this works perfectly on my HTC Hero running 2.0. And on a Galaxy S running Android 2.1 the values only change by a margin, but they change just the same. AND you might have noticed that the values for screen.width and screen.height are the same values as those for innerWidth and innerHeight respectively, which should so totally not be the case as those should account for the address bars and UI chrome of the browser.

So android 2.0, 2.1 and 2.2 exhibit completely different behavior. And because the screen sizes and resolution of every android device is different there is no way to hard code values that will work for all phones.

To really top this off, I tested this on iPhones including 1st Gen, 3g, 3gs and 4 running softwares versions 2.x, 3.x and 4 and all run consistently and correctly.

But this post is not really about iPhone vs Android, this post is really a plea for help.

How would you go about correctly measuring the height of the available space in the HTML window in a browser on Android?

Note. I will be the first to admit that I have spent the better part of the last 5 years doing Flex and Actionscript work. So neither my css or my JS is as strong as I would like. But I am not completely daft. If you can see a better way to accomplish what I have attempted please comment and link code in the comments below. I would love to find a solution.