EN
CSS - set web browser zoom level
3
points
In this article, we would like to show you how to set web browser zoom level using CSS.
Quick solution:
body {
zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform: scale(0.5);
-moz-transform-origin: left top;
}
Where:
0.5means 50% zoom,1.0means 100% zoom (it is default zoom),2.0means 200% zoom,- etc.
Warning:
Mozilla Firefox does not support
zoomstyle sotransformstyle with prefix is used to solve the problem (it is state on November 2022).
Practical example
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.
// ONLINE-RUNNER:browser;
<!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>
Hint:
We can set zoom on any element, e.g.
div,span,input, etc.