How can I scale an entire web page with CSS?
HtmlCssResizeHtml Problem Overview
Using Firefox, you can enlarge an entire web page by simply pressing CTRL +. What this does is proportionally enlarge the entire web page (fonts, images, etc).
How can I replicate the same functionality using simply CSS?
Is there something like page-size: 150% (which would increase the entire page portions by x%?)
Html Solutions
Solution 1 - Html
You might be able to use the CSS zoom property - supported in IE 5.5+, Opera, and Safari 4, and Chrome
Firefox is the only major browser that does not support Zoom (bugzilla item here) but you could use the "proprietary" -moz-transform property in Firefox 3.5.
So you could use:
div.zoomed {
zoom: 3;
-moz-transform: scale(3);
-moz-transform-origin: 0 0;
}
Solution 2 - Html
This is a rather late answer, but you can use
body {
transform: scale(1.1);
transform-origin: 0 0;
// add prefixed versions too.
}
to zoom the page by 110%.
Although the zoom style is there, Firefox still does not support it sadly.
Also, this is slightly different than your zoom. The css transform works like an image zoom, so it will enlarge your page but not cause reflow, etc.
Edit updated the transform origin.
Solution 3 - Html
If your CSS is constructed completely around ex or em units, then this might be possible and feasible. You'd just need to declare font-size: 150% in your style for body or html. This should cause every other lengths to scale proportionally. You can't scale images this way, though, unless they get a style too.
But that's a very big if on most sites, anyway.
Solution 4 - Html
As Johannes says -- not enough rep to comment directly on his answer -- you can indeed do this as long as all elements' "dimensions are specified as a multiple of the font's size. Meaning, everything where you used %, em or ex units". Although I think % are based on containing element, not font-size.
And you wouldn't normally use these relative units for images, given they are composed of pixels, but there's a trick which makes this a lot more practical.
If you define body{font-size: 62.5%}; then 1em will be equivalent to 10px. As far as I know this works across all main browsers.
Then you can specify your (e.g.) 100px square images with width: 10em; height: 10em; and assuming Firefox's scaling is set to default, the images will be their natural size.
Make body{font-size: 125%}; and everything - including images - wil be double original size.
Solution 5 - Html
I have the following code that scales the entire page through CSS properties. The important thing is to set body.style.width to the inverse of the zoom to avoid horizontal scrolling. You must also set transform-origin to top left to keep the top left of the document at the top left of the window.
var zoom = 1;
var width = 100;
function bigger() {
zoom = zoom + 0.1;
width = 100 / zoom;
document.body.style.transformOrigin = "left top";
document.body.style.transform = "scale(" + zoom + ")";
document.body.style.width = width + "%";
}
function smaller() {
zoom = zoom - 0.1;
width = 100 / zoom;
document.body.style.transformOrigin = "left top";
document.body.style.transform = "scale(" + zoom + ")";
document.body.style.width = width + "%";
}
Solution 6 - Html
For Cross-Browser Compatibility :
Example Goes Below :
<html><body class="entire-webpage"></body></html>
.entire-webpage{
zoom: 2;
-moz-transform: scale(2);/* Firefox Property */
-moz-transform-origin: 0 0;
-o-transform: scale(2);/* Opera Property */
-o-transform-origin: 0 0;
-webkit-transform: scale(2);/* Safari Property */
-webkit-transform-origin: 0 0;
transform: scale(2); /* Standard Property */
transform-origin: 0 0; /* Standard Property */
}
Solution 7 - Html
Scale is not the best option
It will need some other adjustments, like margins paddings etc ..
but the right option is
zoom: 75%
Solution 8 - Html
With this code 1em or 100% will equal to 1% of the body height
document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"
Solution 9 - Html
* {
transform: scale(1.1, 1.1)
}
this will transform every element on the page
Solution 10 - Html
Jon Tan has done this with his site - http://jontangerine.com/ Everything including images has been declared in ems. Everything. This is how the desired effect is achieved. Text zoom and screen zoom yield almost the exact same result.
Solution 11 - Html
CSS will not be able to zoom on demand, but if you couple CSS with JS, you could change some values to make a page look bigger. However, as it has been said, this feature is standard nowadays in modern browsers: no need to replicate it. As a matter of fact, replicating it will slow down your website (more things to load, more JS or CSS to parse or execute and apply, etc.)
Solution 12 - Html
you have to set the zoom property in style. Now interesting part is how to calculate it. This is what I did.
let zoom = Number((window.innerWidth / window.screen.width).toFixed(3));
document.firstElementChild.style.zoom = zoom;
this will calculate the ratio of current window width to actual device width.
Then set that value to top level html element zoom property.
Top level html element can be accessed using document.firstElementChild
You can put this code inside window.onresize function to make the whole page zoom accordingly.
set the height of main wrapper div to 100% to prevent white space on zoom.