Is there a way to specify minimum and maximum zoom level for a browser?

Question

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.

Hi, it seems zooming in and out triggers window's `resize` event:`window.addEventListener('resize', (event) => { console.log(this.innerWidth); })` Also you can make use of CSS `zoom` but it doesn't seem well supported. And for your design perhaps switching to relative units could help keep it consistant even when the user zooms. — t3__rry, Aug 03 '18 at 07:57
There are [max-zoom](https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/max-zoom) and [min-zoom](https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/min-zoom) CSS properties — barbsan, Aug 03 '18 at 07:58
@h22 seems they should be defined as `@viewport` rule not `body` — barbsan, Aug 03 '18 at 08:15

Rick · Answer 1 · 2018-08-04T10:21:29.550

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.

Thanks for hints, I have applied them all and upvoted the answer in reward. Unfortunately the zoom level still goes from 25 to 500 % as if nothing has been done, but maybe something will trigger in the future. — Audrius Meškauskas, Aug 03 '18 at 08:30
You're welcome and thank you! Can you please edit your post and add as many information as you possibly can so we can determine the root cause of the issue better? What mobile device was used to test the site? Can you paste your actual HTML, maybe a test site (GitHub, BitBucket, etc.). This issue is bothering me also, since the browser shouldn't allow zoom or zoom further, when you disallow it or determine the maximum zoom via the `meta` tag. Thanks in advance! — Rick, Aug 03 '18 at 08:33
This is not a mobile device, it is Google Chrome desktop browser. — Audrius Meškauskas, Aug 03 '18 at 08:36
Check out [**this post**](https://stackoverflow.com/questions/15365750/viewport-tag-not-working-on-chrome), maybe the `target-densityDpi=device-dpi` works and get back to me. — Rick, Aug 03 '18 at 08:39

Is there a way to specify minimum and maximum zoom level for a browser?

1 Answers1

Linked