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.