How to remove the zoom icon in Opera Mobile

I am creating a webpage for Opera Mobile. It has a small zoom icon in the left-right corner. When I go to www.opera.com, this icon becomes invisible and the zoom level becomes fixed. For any other web page, it appears and I can zoom in and out the page. I want my page to have a fixed zoom too. This is probably a css property. Do you know which properties I should set and on which objects? Or do you think there will be another way to achieve this.

Thank.

+2


source to share


1 answer


It looks like they are using the "viewport" meta tag to indicate the width of the page. This is probably less than mobile Opera, the available scren width, so the Zoom button is unnecessary.

Here is the tag used in the mobile version of Opera.com:

<meta name="viewport" content="width=320" />

      

To prevent your page from scaling, I would set the tag like this:



<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no" />

      

While keeping the user from scaling won't be my first choice, UI-wise.

Opera developer's site describes support for this tag :

Viewport meta tag

The viewport meta tag contains information about the preferred viewport settings for viewing the HTML page that contains it. Like any other meta tag, the viewport sits inside the title element of your browsers HTML pages that support it, using information to render the web page more appropriate for that device, while browsers that simply don't ignore it. It was originally created by Apple to improve the display of web pages on the iPhone, but we added support for it in Opera Mobile 9.5 because it is a good way to optimize the displayed information for different mobile devices. The tag looks like this:

<meta name = "viewport" content = "width = device-width, height = device-height" />

All it contains is a meta attribute that indicates that it is a viewport meta tag and a content attribute that contains a comma-separated list of different values ​​that you want to specify for this page. The different pieces of information you can provide are as follows:

  • width and height: These define the width and height that the viewport should be set to for this web page. The values ​​can be set in pixels, or you can use the device width and device height values, respectively, to indicate that the width and height should be set to the full width and height of the devices screen. The default is 980 pixels wide and can be set between 200 and 10000 pixels. The default height is calculated based on the device's width and aspect ratio, and can be set from 223 to 10,000 pixels.
  • initial-scale: Sets the initial scale of the web page when it is first displayed. By default, it just fills the entire screen of the device unless you intentionally set it otherwise.
  • minimum and maximum scale: these define the minimum and maximum amounts that the user is allowed to increase and decrease, and their values ​​are multipliers. the minimum scale has a default value of 0.25, and its value can range from just above zero to 10.0. the maximum scale value can also vary from slightly above zero to 10.0.
  • user-scaleable: Indicates whether the user is allowed to scale, and the 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 behaviors. It ignores user-scalable, min-max and max-scales because we believe that scaling is a browser feature that should always be available to users. Also, since the presence of the viewport meta tag in the title section of the pages indicates that the author has taken care of the mobile optimization, the small screen does not apply. This means that viewport-enabled pages will look the same regardless of whether Mobile View is turned on or off.

It is recommended that the width and height values ​​are not hard-coded for a single device, such as the iPhone; instead, you should set your values ​​to device width and device height so that your pages will also work well on VGA, QVGA, WVGA and WQVGA devices.

+2


source







All Articles