Droid browser causing havoc on my site

Question

I have a mobile-optimized site that uses a pretty simple trick of serving a different page based on browser width. This worked great until the Droid came along, with its very high pixel density screen.

I understand that the default setting of the screen is 800 pixels wide (significantly wider than my width detect script, which is making its decision of which page to serve at 500 pixels). However, the Droid browser seems to arbitrarily decide to report a smaller width, and thusly serve the smaller-width page. But not in a predictable manor.

As a result, the experience for an end user is completely random: sometimes they see a wide page they have to zoom in on, sometimes they see a page that's scaled just right to their window.

I have written a small script that reports the screen width and, even when forcing the viewport to a specific pixel size, I have had some users still report an 800 pixel width (even in vert orientation) and others report the fixed width.

Is there a way of definitively setting the width for the Droid's browser? Is this a bug? Am I just simply not thinking something through? Frankly, it's starting to feel like designing in a dark cave with my hands tied behind my back.

Answer 1

It looks like you're determining whether to display the mobile page (the story) or the description page by screen width. From my understanding, it would probably be better to detect mobile phones by user agent or user a pre-built browser detection script to determine which page to display. I often use browser windows less than 800px wide, so an issue like this would have prevented me from seeing the page correctly on my browser.