0

After finishing a website design for a client, I realized that everything was kind of small. After experimenting with the browser zoom, I found that zooming in 10% fixed a lot! The problem is, I can't figure out how to resize EVERYTHING (div sizes, image sizes, text sizes, etc.) to 110%.

Any ideas are appreciated. I would prefer to do this all in CSS.

Edit -

Haha, OK guys, I guess I'll just go in and actually spend some time changing the sizes. It isn't what I wanted to do but I guess it is my only real option. Thanks guys :)

Community
  • 1
  • 1
Freesnöw
  • 30,619
  • 30
  • 89
  • 138

3 Answers3

3

The correct way to do this is to redesign your website. If you have designed correctly, this should be very easy. Some advice:

  • Page width: Increase the width of your outermost container, child element widths should expand to fill the space unless you have hardcoded absolute widths set. In those cases, adjust the px to accommodate.

  • Font size: If you have used em or % values, just increase the font-size of body (the other elements will inherit this base font size). If you have used px for font sizes, you'll have to increase them.

I think you know deep down that "zooming" the page via javascript or the IE zoom property isn't the right approach and you are avoiding the redesign. Even something like body{ transform:scale(1.1); } is going to make your images look bad when they scale/stretch, and since it's CSS3 the support will be lacking, and after testing this idea it appears to be able to scale content out of the viewport/visible area.

The right way to do it if you want this to be permanent change is to rewrite your CSS.

Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
  • 1
    Alright, I guess I'll stop being lazy and actually go fix it :3 +1 for calling me out on my inside feelings. – Freesnöw May 05 '12 at 20:24
2

I would suggest you to solve the issue in an other way (setting font size 10px up etc.)

But if you really want to do that I referr you to my recent answer on a similar issue. Be careful because FF does not support this, because FF does not allow zooming via js!

imitate browser zoom with JavaScript

[There you go:][1]

Use: 

document.body.style.zoom=1.0;this.blur();

1.0 means 100%

150% would be 1.5 1000% would be 10.0

this.blur() means that the curser, maybe you selected an input field, looses focus of every select item.

or:

You can use the css3 element [zoom][2] ([Source][3])

[Firefox does not allow][4] zooming with the browser because you can't access the user properties via javascript or sth.

So you can just use some CSS styles which allow to zoom (CSS3: zoom, as mentioned above) or to increase the text size! Which you could do with including a different CSS file for example. But here you have the "jumpy" problem, because the styled css elements (floated etc.) have to "interact" different in fact of their attributes.

The zoom I posted above works well in Chrome and IE8+ (FF not supported as mentioned)

[1]: http://www.perlunity.de/javascript/scripts/javascript_0314_main.shtml [2]: http://www.css3.com/css-zoom/ [3]: Can I zoom into a web page like IE or Firefox do, using programming? [4]: http://www.mozilla.org/projects/security/components/signed-scripts.html

Community
  • 1
  • 1
creativeby
  • 859
  • 6
  • 10
  • 2
    Really really bad idea to try to fix a design by trying to change the zoom setting. – jjrv May 05 '12 at 20:21
1

This resizes everything on the screen to 200% scale in all the worth-while browsers:

body {
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
}
Devin McQueeney
  • 1,277
  • 2
  • 14
  • 31