What's the deal with Android web browser resolution?

Question

Here are two images of the same android phone, once in Portrait mode, once in Landscape mode.

Shouldn't one resolution be the opposite of the other? I.e. if one is 800x1360, the other should be 1360x800? What's going on here? If I try the same thing on my ipod touch, it reports the same resolution regardless of orientation. Also, on the android phone, the resolution appears to change as you zoom in and out or scroll around the page.

I'm trying to figure out how to handle the "reported" resolution of an android phone in CSS, which I can't do until I know exactly which resolution it reports. :(

Answer 1

I've noticed a weird thing where dimensions like this are stored from the previous window/session. When u go to landscape/portrait and get the rez, do a refresh, see if u get another different rez.

Same is true for scaling.

My advice is do a useragent lookup and make a page specifically for mobile devices. rendering the normal 'desktop' site just wont work.

if you do make the mobile site look at the html meta tage "Viewport" and put something like this in your head

Answer 2

As far as I can determine, the browser assumes that you are going to let it rescale the page as necessary, so it just always reports the same width no matter the actual screen size and orientation. The height is presumably just chosen so that the aspect ratio matches the actual screen ratio.

If you are running FroYo, the width is pretty much always reported as 800. I believe that it was more like 640 for Eclair, and that earlier versions may have used a completely different scheme for reporting screen size. (Those earlier versions also, I believe, supported "@media handheld", unlike later versions which assume that your phone screen/browser is closer to a desktop than a traditional handheld device.)