Setting zoom level on mobile browser

javascript mobile-phones mobile-website
Zbyszek Swirski picture Zbyszek Swirski · Mar 30, 2010 · Viewed 7.6k times · Source

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

Olly Hodgson picture Olly Hodgson · Apr 6, 2010

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.

Related questions

Blocking device rotation on mobile web pages

Is it possible to detect on my page, for example using Javascript, when user visit it using mobile device in portrait mode, and stop orientation changing when user rotate its phone to landscape? There is game on my page, optimized …

Read More
Which Devices Support Javascript Geolocation via navigator.geolocation?

The iPhone supports geolocation in mobile Safari via the following call: navigator.geolocation.getCurrentPosition( function(pos){ var lat = pos.coords.latitude; var long = pos.coords.longitude; }, function(){ /* Handler if location could not be found */ } ); I'd like to build a good …

Read More
How reliable is detecting mobile devices by screen resolution?

This sounds a bit too good to be true, so please tell me if it is. If I have just one single version of a mobile website (no variations for different devices, just one website for all mobiles), how reliable …

Read More