Hi,
I am designing a web page for Opera Mobile. It has a little zoom icon on the left right corner. When I visit www.opera.com, this icon becomes invisible and zoom level becomes fixed. For any other web page it appears and I can zoom in and out of the page. I want the same fixed zoom behavior in my page too. It is probably some css property. Do you know what properties should I set and on which objects? Or do you think there would be another way to accomplish this.
Thank you.
It looks like they are using the "viewport" meta tag to specify the width of the page. This probably is set to smaller than mobile Opera's available scren width, so the Zoom button is not needed.
Here is the tag as it is used on the mobile version of Opera.com:
<meta name="viewport" content="width=320" />
To keep your page from scaling, I would set the tag to be as follows:
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no" />
Although keeping the user from scaling would not be my first choice UI-wise.
The opera developer site describes the support of this tag:
The viewport meta tag
The viewport meta tag contains information about the preferred settings of the viewport for viewing the HTML page it is contained within. Just like any other meta tag, viewport sits inside the head element of your HTML page—browsers that support it use the information to display the web page more appropriately for that device, while browsers that don’t simply ignore it. It was originally created by Apple to improve the way web pages display on the iPhone, but we have added support for it in Opera Mobile 9.5 because it is a good way of optimizing display information for different mobile devices. The tag looks like so:
<meta name = "viewport" content = "width = device-width, height = device-height" />
All it contains is the meta attribute, which specifies that this is a viewport meta tag, and the content attribute, which contains a comma-delimited list of the different values you want to specify for this page. The different pieces of information you can specify are as follows:
- width and height: These specify the width and height that the viewport should be set at for this web page. The values can be set in pixels, or you can use the device-width and device-height values, respectively, to specify that the width and height should be set as the full width and height of the device’s screen. The default value of width is 980 pixels, and it can be set from 200 to 10,000 pixels. The default value of height is calculated from the width of the device and its aspect ratio, and it can be set from 223 to 10,000 pixels.
- initial-scale: This sets the initial scale of the web page when it is first displayed. By default it just fills up the whole screen of the device, unless you deliberately set it otherwise.
- minimum-scale and maximum-scale: These specify the minimum and maximum amounts that the user is allowed to zoom in and out, their values being multipliers. minimum-scale has a default value of 0.25, and its value can range from just above zero to 10.0. maximum-scale’s value can also range from just above zero to 10.0.
- user-scalable: Specifies whether the user is allowed to zoom in and out—possible values are yes and no, with yes being the default.
Opera Mobile 9.5 fully supports the viewport meta tag, with a few notable specific behaviours. It ignores user-scalable, minimum-scale and maximum-scale because we believe that zooming is a browser feature that should always be available for users. Also, as the presence of the viewport meta tag in the page’s head section indicates the author has taken care of optimizing for mobile, small screen rendering is not applied. This means that viewport-enabled pages will look exactly the same whether “Mobile view” is switched on or off.
It is recommended that width and height values are not hardcoded for a single device, such as the iPhone; instead you should set their values to device-width and device-height, so that your pages also work nicely on VGA, QVGA, WVGA and WQVGA devices.
Yeah, this is a pain in the ass, because device width actually returns a lie...instead of the screen width.