Setting zoom level on mobile browser

Question

I am designing website for mobile access and I want to set page width, height and button sizes, so they display filling up the screen. For example if user is using HTC HD , the whole screen would be 480x800 with button sized 240x200. However IE mobile as well as Opera load the page with some zoom level, so the buttons display either too large or too small. How can I either read current zoom level in javascript or set it from javascript?

Answer 1

Take a look into <meta name="viewport">. It's supported across a wide variety of mobile platforms, including (AFAIK) iPhone, Android, Blackberry, Opera Mobile and even IE6 Mobile. Basically, it lets you preset the device width, zoom level, and max/min zoom. Have a look at the Apple developer site and for more info.

Also, you can use CSS media queries to detect the shape and size of the browser, and serve up different layouts (etc) accordingly. Again, these are fairly widely supported and the Apple developer site has more information.