[Edit]

CSS - set web browser zoom level

1 contributors

2 contributions

0 discussions

3 points

Created by:

Maison-Humphries

791

In this article, we would like to show you how to set web browser zoom level using CSS.

Quick solution:

xxxxxxxxxx
 
body { 
    zoom: 0.5;
    -ms-zoom: 0.5;
    -webkit-zoom: 0.5;
    -moz-transform: scale(0.5);
    -moz-transform-origin: left top;
}

Where:

0.5 means 50% zoom,
1.0 means 100% zoom (it is default zoom),
2.0 means 200% zoom,
etc.

Warning:

Mozilla Firefox does not support zoom style so transform style with prefix is used to solve the problem (it is state on November 2022).

Practical example

Edit

In this section, we present a full working example of how to use CSS zoom property on body element to set web browser zoom level.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
​
    body { 
        zoom: 0.5;
        -ms-zoom: 0.5;
        -webkit-zoom: 0.5;
        -moz-transform: scale(0.5);
        -moz-transform-origin: left top;
    }
​
  </style>
</head>
<body>
  <input type="button" value="Click me!" />
</body>
</html>