How can I scale an entire web page with CSS

Question

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Scale is not the best option It will need some other adjustments  like margins paddings etc    but the right option is zoom  75

User · Answer

With this code 1em or 100  will equal to 1  of the body height  document body style fontSize     window innerHeight 100  6 25

User · Answer

transform  scale 1 1  1 1      this will transform every element on the page

User · Answer

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

User · Answer

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

User · Answer

For Cross-Browser Compatibility   Example Goes Below    lt html gt  lt body class  quot entire-webpage quot  gt  lt  body gt  lt  html gt      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

User · Answer

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

[html] How can I scale an entire web page with CSS?

Examples related to html

Examples related to css

Examples related to resize