javascript - Setting zoom level on mobile browser - Stack Overflow

admin管理员组

文章数量:1317909

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?

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?

• javascript
• mobile-phones
• mobile-website

Share Improve this question Follow asked Mar 30, 2010 at 19:34 Zbyszek SwirskiZbyszek Swirski 5111 silver badge22 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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.

You shouldn't rely on using JavaScript on mobile devices because it is still not widely supported across all phones. Instead you should set the width of the page to be the same as the browser width so your pages appear at 100%, e.g. body {width: 100%; margin: 0; padding: 0;}

As for buttons you should use relative values or use different image sizes if you are able to detect the browser width before the page is loaded.

本文标签： javascriptSetting zoom level on mobile browserStack Overflow