196

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

I. J. Kennedy
  • 24,725
  • 16
  • 62
  • 87
  • 7
    The page zoom feature of Firefox appears in every modern browser - replicating it seems rather pointless. – Quentin Jul 21 '09 at 09: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 '09 at 08: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 '11 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 '11 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: http://www.lonniebest.com/CardTrick/ Instead of remaking the page, I would like to be zoomed by default. – Lonnie Best Aug 10 '14 at 03:58
  • Not a complete fix, but use em's as your unit of measure. Things start to scale relative to their parent (change the body's size and everything just flows through). For more *interesting* results... use cm as your unit of measure though mobile devices seem to cut the size in half. – Jefferey Cave Mar 08 '16 at 22:32

12 Answers12

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;
}
maxshuty
  • 9,708
  • 13
  • 64
  • 77
Jon Galloway
  • 52,327
  • 25
  • 125
  • 193
  • 2
    The proprietary zoom property is supported only by IE. http://reference.sitepoint.com/css/zoom#compatibilitysection – Quentin Jul 21 '09 at 09: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. – Jon Galloway Jul 21 '09 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. – Jon Galloway Jul 22 '09 at 00: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 '09 at 11:39
  • I can't argue with that thorough test suite, @porneL. You tested two obsolete versions of IE, didn't mention which Firefox you tested... I tested in all current browsers. Try it. – Jon Galloway Sep 17 '09 at 00:23
  • This didn't work for me in Opera 10.10, worked in current versions of the other four major browsers. I used `body { zoom: 0.6667; -moz-transform: scale(0.6667); }` – Kip Feb 08 '10 at 20:07
  • 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. https://developer.mozilla.org/En/CSS/-moz-transform-origin) – futtta Mar 22 '10 at 09:03
  • Does not work in Opera (v11.51 on Windows; v11.50 on Linux), but "works" with everything else I tried - IE8 screws up center aligned block. Firefox is rather glitchy, sometimes adds borders and doesn't center correctly (also needed `-moz-transform-origin: center top;` to stop page being vertically centered). – Peter Boughton Sep 16 '11 at 12:31
  • 1
    Hmmm, it looks like `transform:scale` is supported by all the browser engines now (there are `-webkit-` `-moz-` `-o-` and `-ms-` prefixes). Assuming those actually work (seem to from quick test), then the only reason to use `zoom` is for IE8 and below? – Peter Boughton Sep 16 '11 at 12:41
  • I like this solution, but I noticed that using it messes with jqplot's highlighter and zoom capabilities. Is there a solution that coordinates well with these functions? – Matt Cremeens Jun 20 '14 at 14:24
  • Beware, using scale transforms can cause problems with js based/pixelbased interaction types such as draggable and order. I'm working on a similar issue and have thusfar noticed some of those still work just fine when using em units, but not with scale transforms. – Koert van Kleef Apr 20 '16 at 10:34
106

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.

kumarharsh
  • 18,961
  • 8
  • 72
  • 100
  • 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. – Dave Burton Nov 25 '13 at 01:33
  • yes, I should have mentioned that the content is clipped with `transform`. Thanks for the comment. – kumarharsh Nov 25 '13 at 08:35
  • 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 '16 at 05:53
  • @KaiCarver *if* you use this method, it'll always result in clipping. No matter which *point* you use for `transform-origin`. What I wrote is *just one example* of what value to use. You're of-course free to use `transform-origin: 0 0` if it suits your use-case (or if you don't care for what's there in the bottom-right corner) – kumarharsh Jun 25 '16 at 12:38
  • @AngularM can you share a code snippet to show the behaviour? I'm sure there's some other reason for this. – kumarharsh Jan 11 '17 at 12:20
  • Work fine but it adds horizontal scroll bar. how to avoid that? – Usman Ahmed Apr 09 '17 at 13:22
  • add an `overflow:hidden` property to the body. – kumarharsh Apr 11 '17 at 07:17
  • 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? – theCrabNebula Jun 12 '20 at 05:43
  • 1
    Nvm, all I had to do was take away the transform-origin line – theCrabNebula Jun 12 '20 at 05:48
  • 1
    I tried this in firefox 89.0.1 and it works. Support seems ok now. – UnDiUdin Nov 08 '21 at 10:27
21

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.

Joey
  • 344,408
  • 85
  • 689
  • 683
  • 3
    That would only change the size of my fonts. CTRL+ also proposition widens fixed widths, heights and image sizes as well. –  Jul 20 '09 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 '09 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. – Jon Galloway Jul 21 '09 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%
SystemX
  • 481
  • 4
  • 10
  • 3
    ...not for Firefox which doesn't support it at all. – ozzmosis Oct 29 '20 at 08:53
  • How about this one? https://developer.mozilla.org/en-US/docs/Web/CSS/scale – SystemX Nov 01 '20 at 00:08
  • 1
    And how about this one? ;) https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/zoom I have meant zoom is not quite right option, because it is not supported by Firefox, so you need to use both of those descriptors rather than to consider one of them to be better. – ozzmosis Nov 02 '20 at 13:55
  • so what do you recommand as an alternative for that? – SystemX Nov 03 '20 at 22:16
  • Do not search an alternative, use both of those descriptors. – ozzmosis Dec 18 '20 at 09:06
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 + "%";
        }
Ags1
  • 619
  • 1
  • 9
  • 18
  • 1
    Be careful doing this. You will sacrifice the ability to use position: fixed – Bangkokian Aug 16 '20 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. – Matt Leonowicz Aug 29 '23 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.

e100
  • 1,603
  • 2
  • 14
  • 21
  • 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? –  Jul 21 '09 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 '09 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 '09 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 */
    }
Saumyajit
  • 678
  • 8
  • 10
3

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

document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"
Andrew Whitaker
  • 124,656
  • 32
  • 289
  • 307
Cedric Austen-Brown
  • 31
  • 1
  • 1
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.

Andy Ford
  • 8,410
  • 3
  • 26
  • 36
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.)

T0xicCode
  • 4,583
  • 2
  • 37
  • 50
  • 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 03 '20 at 08:34
1
 * {
transform: scale(1.1, 1.1)
}

this will transform every element on the page

Rushabh Sooni
  • 27
  • 2
1

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.

Ronn Wilder
  • 1,228
  • 9
  • 13