198

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%?)

6
  • 7
    The page zoom feature of Firefox appears in every modern browser - replicating it seems rather pointless.
    – Quentin
    Jul 21, 2009 at 9:03
  • 1
    I agree with David. It seems kind of pointless to replicate this since browsers now days have this feature built in....
    – user
    Jul 22, 2009 at 8:36
  • 6
    this would actually be an incredibly useful feature for mobile devices. Lots of phones are now increasing their PPI without accommodating the difference (aside from the iPhone4, of course).
    – DA.
    Feb 28, 2011 at 17:15
  • 46
    Its not replicating it. It might be useful for something like a page/element preview in an embedded div.
    – RichieHH
    May 30, 2011 at 11:55
  • 3
    The page designer ought to be able to set a default zoom for his page. I have a page that was big when I made it, but small now due to high resolution displays: lonniebest.com/CardTrick Instead of remaking the page, I would like to be zoomed by default. Aug 10, 2014 at 3:58

12 Answers 12

212

You might be able to use the CSS zoom property - supported in IE 5.5+, Opera, and Safari 4, and Chrome

Can I use: css Zoom

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;
} 
11
  • 2
    The proprietary zoom property is supported only by IE. reference.sitepoint.com/css/zoom#compatibilitysection
    – Quentin
    Jul 21, 2009 at 9:12
  • 17
    David, that reference is very out of date - look at the the browser versions it lists. CSS Zoom is supported in all current major browsers except Firefox. And it's no more proprietary than any of the -moz- CSS extensions. Jul 21, 2009 at 15:44
  • 3
    Note: I think the other solutions that have been proposed - such as em and % based scaling - are more "pure" but aren't necessarily practical on most web layouts unless you've built that way from scratch. Jul 22, 2009 at 0:36
  • 1
    I've tested Opera 10b2 and it doesn't seem to support it. Firefox nightly behaves oddly (zoomed fragment disappears). IE5/6 are buggy. Works fine in WebKit only.
    – Kornel
    Jul 22, 2009 at 11:39
  • 2
    thanks jon, great info! in firefox -moz-transform scale indeed works, but depending on your use case you might need to correct the position of the element using -moz-transform-origin (cfr. developer.mozilla.org/En/CSS/-moz-transform-origin)
    – futtta
    Mar 22, 2010 at 9:03
108

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.

10
  • 1
    Thanks for this, but you need some semicolons between the declarations. Also, when I tried this the page shifted left, past the left margin, so that the left part of the page was no longer visible. Adding the various corresponding "...transform-origin: 0 0" declarations fixed that. Nov 25, 2013 at 1:33
  • 1
    I agree with @Dave Burton: using transform-origin: 0 0; does what I want. For example, to zoom the page to 150%: transform: scale(1.5); transform-origin: 0 0;. I believe @kumar_harsh 's otherwise good answer should be corrected.
    – Kai Carver
    Jun 23, 2016 at 5:53
  • 2
    I'm trying to add this to the front page of my website. It definitely changes the size of the page, but it also makes everything originate to the left side of the screen. Is there a way to use this zoom whereby it just scales everything from a cernter point? Jun 12, 2020 at 5:43
  • 1
    Nvm, all I had to do was take away the transform-origin line Jun 12, 2020 at 5:48
  • 1
    I tried this in firefox 89.0.1 and it works. Support seems ok now.
    – UnDiUdin
    Nov 8, 2021 at 10:27
22

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.

3
  • 3
    That would only change the size of my fonts. CTRL+ also proposition widens fixed widths, heights and image sizes as well.
    – TimH
    Jul 20, 2009 at 22:49
  • 2
    I know, but it's as close as you can get with pure CSS. Also not only your fonts change but everything where the dimensions are specified as a multiple of the font's size. Meaning, everything where you used %, em or ex units.
    – Joey
    Jul 20, 2009 at 23:19
  • 1
    That's just not correct. I've tested the solution I listed below (zoom + -moz-transform properties), and it works on FF3.5, IE6+, Safari, and Opera. It scales images as well as text. You can scale pages in CSS. Jul 21, 2009 at 23:40
10

Scale is not the best option

It will need some other adjustments, like margins paddings etc ..

but the right option is

zoom: 75%
5
8

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 + "%";
        }
2
  • 1
    Be careful doing this. You will sacrifice the ability to use position: fixed
    – Bangkokian
    Aug 16, 2020 at 17:49
  • Thanks! This helped a lot for Firefox in my case. I was scaling things to 0.7 (make everything smaller to fit more) but without the width adjustment, print version was cropped anyway. Aug 29 at 16:16
6

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.

3
  • I don't understand, if I say body{font-size: 62.5%; font-size: 125%} - how would that define 1em to be 10px. Could the browser simply ignore the first font-size declaration and then simply make 125% = 10px?
    – TimH
    Jul 21, 2009 at 14:55
  • I think you misunderstood. you wouldn't do both at the same time. 62.5 x2 = 125... to show how you can scale things by adjusting the value.
    – Ape-inago
    Jul 21, 2009 at 23:23
  • Yep. I should have said 'then if you use Javascript to set body {font-size: 125%} all page elements will double in size'.
    – e100
    Jul 22, 2009 at 18:30
6

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 */
    }
3

With this code 1em or 100% will equal to 1% of the body height

document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"
2

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.

1

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.

1

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.)

1
  • It is a standard browser feature, but adding the feature directly to the site means you don't have to rely on (1) user's expertise with their browser of choice and (2) browser-specific instructions
    – Ags1
    Jan 3, 2020 at 8:34
1
 * {
transform: scale(1.1, 1.1)
}

this will transform every element on the page

1