Last updated on February 21st, 2022 at 04:13 pm
This css code will simply zoom the webpage automatically according to the values passed when the website loads, We can even say that this will scale the entire webpage without the user selecting the browsers zoom option. The CSS Zoom property will do the trick here and it is supported in IE 5.5+, Opera, Safari and Chrome. Firefox is the only major browser that does not support Zoom. Now we have a property named transform which is compatible in all major web browsers.
Just add this code inside your body tag in CSS for example.
<style>
body
{
background-color:#000;
padding:0; font-family: Arial, Helvetica, sans-serif;
margin:0px auto auto auto;
color:yellow;
font-size:12px;
width:100%;
height:100%;
transform: scale(1.5);
}
div {
border: solid red;
width: 140px;
height: 60px;
font-size:12px;
}
</style>
<body><center><p><br><p><br><p><br><p><br><p><br><p><br>
<pre>
This is a test</pre>
<div>Transformed element</div>
Tip: You can try adding some javascript in such a way that when user click a button size the webpage starts zooming in/out dynamically (just change the scale value).
Try modifying transform: scale(1.5) value to something else to play around.
You might also be interested in this tutorial, Dynamically change font size using PHP
Take a look at the Demo.
admin
Thank you! This code worked wonders!
As a follow up question, do you know how I can exclude certain pages from this zoom CSS?
Hello Bryle,
You are welcome, For excluding certain pages from this zoom css you can use PHP in order to check whether the following page need zoom or not and then echo it 🙂 There are numerous other methods as well. It depends upon your requirment.