Как изменить размер страницы css

asked Jul 20, 2009 at 22:19

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;
} 

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.

answered Jul 1, 2013 at 16:08

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.

answered Jul 20, 2009 at 22:27

Scale is not the best option

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

but the right option is

zoom: 75%

answered Oct 22, 2020 at 0:45

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 + "%";
        }

answered Jan 2, 2020 at 12:38

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.

answered Jul 21, 2009 at 9:02

SaumyajitSaumyajit

6407 silver badges9 bronze badges

answered Jul 15, 2011 at 15:00

 * {
transform: scale(1.1, 1.1)
}

this will transform every element on the page

answered Jul 24, 2019 at 7:18

Andy FordAndy Ford

8,3503 gold badges26 silver badges35 bronze badges

answered Jul 22, 2009 at 11:05

Ronn WilderRonn Wilder

1,1387 silver badges12 bronze badges

asked Jul 20, 2009 at 22:19

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;
} 

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.

answered Jul 1, 2013 at 16:08

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.

answered Jul 20, 2009 at 22:27

Scale is not the best option

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

but the right option is

zoom: 75%

answered Oct 22, 2020 at 0:45

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 + "%";
        }

answered Jan 2, 2020 at 12:38

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.

answered Jul 21, 2009 at 9:02

SaumyajitSaumyajit

6407 silver badges9 bronze badges

answered Jul 15, 2011 at 15:00

 * {
transform: scale(1.1, 1.1)
}

this will transform every element on the page

answered Jul 24, 2019 at 7:18

Andy FordAndy Ford

8,3503 gold badges26 silver badges35 bronze badges

answered Jul 22, 2009 at 11:05

Ronn WilderRonn Wilder

1,1387 silver badges12 bronze badges

asked Jul 20, 2009 at 22:19

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;
} 

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.

answered Jul 1, 2013 at 16:08

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.

answered Jul 20, 2009 at 22:27

Scale is not the best option

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

but the right option is

zoom: 75%

answered Oct 22, 2020 at 0:45

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 + "%";
        }

answered Jan 2, 2020 at 12:38

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.

answered Jul 21, 2009 at 9:02

SaumyajitSaumyajit

6407 silver badges9 bronze badges

answered Jul 15, 2011 at 15:00

 * {
transform: scale(1.1, 1.1)
}

this will transform every element on the page

answered Jul 24, 2019 at 7:18

Andy FordAndy Ford

8,3503 gold badges26 silver badges35 bronze badges

answered Jul 22, 2009 at 11:05

Ronn WilderRonn Wilder

1,1387 silver badges12 bronze badges

asked Jul 20, 2009 at 22:19

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;
} 

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.

answered Jul 1, 2013 at 16:08

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.

answered Jul 20, 2009 at 22:27

Scale is not the best option

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

but the right option is

zoom: 75%

answered Oct 22, 2020 at 0:45

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 + "%";
        }

answered Jan 2, 2020 at 12:38

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.

answered Jul 21, 2009 at 9:02

SaumyajitSaumyajit

6407 silver badges9 bronze badges

answered Jul 15, 2011 at 15:00

 * {
transform: scale(1.1, 1.1)
}

this will transform every element on the page

answered Jul 24, 2019 at 7:18

Andy FordAndy Ford

8,3503 gold badges26 silver badges35 bronze badges

answered Jul 22, 2009 at 11:05

Ronn WilderRonn Wilder

1,1387 silver badges12 bronze badges