Zoom or scale a webpage automatically using css
Zoom or scale a webpage automatically using css
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.
//For IE, opera, safari and chrome. zoom: 1.5; //Only for Firefox -moz-transform: scale(1.5);
Just add this code above inside your body tag in CSS for example.
body
{
background-color:#fff;
padding:0; font-family: Arial, Helvetica, sans-serif;
margin:0px auto auto auto;
color:#424849;
font-size:12px;
zoom: 1.5;
-moz-transform: scale(1.5);
}
Make sure you have both zoom and -moz-transform properties set to the same value, otherwise firefox and other browsers will not be zooming or scaling the webpage equally.
Zoom or scale a webpage automatically using css,Incoming search terms:
- auto-zoom web page in javascript (3)
- css zoom page (2)
- html based on IE zoom (2)
- html body scale (1)
- how to zoom out webpage without using options (1)
- firefox page zoom css (1)
- firefox css zoom solution (1)
- display a webpage in a css div with zoom factor (1)
- css zoom webpage (1)
- html code zoom page (1)
- html or css to automatically zoom out (1)
- html: zooming throughs off content (1)
- scaling web page with javascript (1)
- scaling web page (1)
- scale whole webpage (1)
- scale webpage (1)
- scale entire css page (1)
- scale css zoom (1)
- occ zoom web page (1)
- make webpage autosize using css (1)
- css transform scale whole page (1)
- css set page zoom (1)
- css auto zoom (1)
- body scale css (1)
- automatically zoom html (1)
- automatically scale embeded web page (1)
- авто зум html (1)
- auto zoom out html code (1)
- auto zoom on html (1)
- auto zoom in javascript (1)
- css automatically scale (1)
- css automatically zoom page (1)
- css scale whole website (1)
- css safari auto zoom (1)
- css page zoom (1)
- css code for page zoom (1)
- css body zoom ie (1)
- css body zoom (1)
- css body set zoom (1)
- css body scale (1)
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.