I just started convert my website having 'Responsive Web Design'. I installed the "Web Developer" Plug-in for Firefox ( http://chrispederick.com/work/web-developer/ ) to check, if it's working. Everything looked fine.
Now I tried this with my android phone. I didn't work correctly for portrait mode... I tracked the problem down to wrong handling of the @media-selectors at the phone:
This page ( https://worldtalk.de/m/test.php ) generates a CSS that outputs what height/width and device-height/width + orientation the browser using as parameters.
I got the following results:
- portrait, 800x1200
- landscape, 800x400
The orientation was correct, the width/height and device-width/height were the same for both orientations. But the device (HTC Desire Z) just uses a wrong screen resolution (800x1200) for portrait mode. I would like to avoid having a device database with user-agents or something like that.
Additional Information:
- Browser-Version: WebKit/533.1
- Android 2.3.3 / Sense 2.1
- HTC Desire Z (T-Mobile firmware)
- JavaScript reports identical screen resolution
Questions:
- Is this only my phone model or a general behavior of the android browser?
- How to fix this?