Recent browsers allow to change the zoom level with CTRL +- , CTRL-mouse wheel and also two finger pinch gesture on the trackpad. While I myself find the feature very convenient (the fonts on various websites are often too small for me to read), we had some testing sessions where the tester (knowingly on unknowingly) applied very extreme zoom level under that no web page ever could be usable. Then they claim that possibility to do this is a bug, that the user may apply the zoom without knowing that is he doing and may not be able to set it back. The I am asked to disable the zoom completely but I do not like this idea myself very much.
Instead of simply disabling the zoom, I would like the possibility to set its minimal and maximal boundaries under that, I have verified, the website still looks good enough. Questions how to disable the zoom completely are not duplicates of this question.
The website is build on the top of React framework.
I tried to put the following in CSS:
body {
min-zoom: 0.75;
max-zoom: 1.5;
}
or
min-zoom: 75%;
max-zoom: 150%;
This was not helpful, zoom is allowed to change from 25 to 500 % that my design just cannot manage. Other properties like
body {
margin: 200px;
}
are respected in this place hence it is not so that the tag or whole css file is just ignored.
I also tried to add
<meta name="viewport" content="width=device-width,
initial-scale=1.00, maximum-scale=1.5, minimum-scale=0.75">
to my head tag in index.html but also seems just ignored.
I also added
@viewport {
zoom: 1.00;
min-zoom: 0.75;
max-zoom: 1.5;
}
to my css, browser does not care.
To determine the minimum and maximum zoom boundaries the user agent (browser) is allowed to handle, use the viewport meta tag and set your boundaries there, e.g.:
<meta name="viewport" content="width=device-width, initial-scale=1.00, maximum-scale=2.00, minimum-scale=1.00">
The recognized properties in the viewport <meta> element are:
width: The width of the virtual viewport of the device.height: The height of the "virtual viewport" of the device.device-width: The physical width of the device's screen.device-height: The physical height of the device's screen.initial-scale: The initial zoom when visiting the page. Setting to 1.0 does not zoom.minimum-scale: The minimum amount the visitor can zoom on the page. Setting to 1.0 does not zoom.maximum-scale: The maximum amount the visitor can zoom on the page. Setting to 1.0 does not zoom.user-scalable: Allows the device to zoom in and out. Values are yes or no.
Official information about the viewport meta element can be found in the CSS Device Adaptation draft.
To allow minimum zoom of 1.00 and maximum zoom of 2.00 on the page, set minimum-scale=1.00 and maximum-scale=2.00:
<meta name="viewport" content="width=device-width, initial-scale=1.00, minimum-scale=1.00, maximum-scale=2.00">
To disallow any zoom on the page, set the scales to 1.00 each and user-scalable=no:
<meta name="viewport" content="width=device-width, initial-scale=1.00, minimum-scale=1.00, maximum-scale=1.00, user-scalable=no">
Although this feature is supported across a wide range of mobile platforms, it's not a 100% guarantee, that you can limit the minimum and maximum boundaries.
There is also the CSS at-rule @viewport in the CSS Device Adaptation, but its support is currently low according to caniuse.com and MDN. However, when the browser vendors will implement the feature according to the draft, you'll be able to determine the zoom boundaries in your stylesheet using the min-zoom and max-zoom properties, e.g.:
@viewport {
zoom: 1.0;
min-zoom: 1.0;
max-zoom: 2.0;
}
As a side note, in case you want to detect the zoom level using JavaScript, check out this post for more details.
