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:
xxxxxxxxxx
1
body {
2
zoom: 0.5;
3
zoom: 0.5;
4
zoom: 0.5;
5
transform: scale(0.5);
6
transform-origin: left top;
7
}
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 sotransform
style with prefix is used to solve the problem (it is state on November 2022).
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
1
2
<html>
3
<head>
4
<style>
5
6
body {
7
zoom: 0.5;
8
zoom: 0.5;
9
zoom: 0.5;
10
transform: scale(0.5);
11
transform-origin: left top;
12
}
13
14
</style>
15
</head>
16
<body>
17
<input type="button" value="Click me!" />
18
</body>
19
</html>
Hint:
We can set zoom on any element, e.g.
div
,span
,input
, etc.