HTML and CSS Reference
In-Depth Information
device pixels for each pixel on your page (sometimes called CSS pixels). To
alter how many or just set a CSS pixel to equal 1 device pixel, you can use
target-densitydpi=device-dpi
. For example:
target-densitydpi=device-dpi
or
target-densitydpi=160
.
<meta name=”viewport” content=”target-densitydpi=device-dpi”>
Set a maximum and/or minimum allowed zoom factor for your content.
If you want to limit how far your users can zoom in or out, you can use
maximum-scale
and
minimum-scale
, like so:
<meta name=”viewport” content=”maximum-scale=2, minimum-scale=0.5”>
Turn off the ability to zoom.
This is done using
user-scalable=no
:
<meta name=”viewport” content=”user-scalable=no”>
.
TIP:
Zooming is a very important accessibility feature for many
users. You should really think carefully before you limit it or turn
it off completely. A viable use case would be a game UI where you want it
to remain full screen and don't want it to be zoomed (in which case, you
might want to provide an in-game zoom mechanism). Or, you might want
to just limit zooming to acceptable levels that don't make your app look
too terrible at either end of the spectrum but still retain acceptable levels
of zooming for low-vision users.
