Simple - I have a layout that is 800 by 600. When I press Ctrl and +, it zooms in and looks wonderful.

I want to know if there's a CSS/Javascript way to do the same? Without the user having to do it (because users will not do it and see the small layout).

Same question was posted by someone Setting IE "Optical Zoom" feature using Javascript/CSS that got no good replies.

Simple - I have a layout that is 800 by 600. When I press Ctrl and +, it zooms in and looks wonderful.

I want to know if there's a CSS/Javascript way to do the same? Without the user having to do it (because users will not do it and see the small layout).

Same question was posted by someone Setting IE "Optical Zoom" feature using Javascript/CSS that got no good replies.

• javascript
• css
• resize
• zooming

• to add to this - I know how to zoom in text. I want to zoom in everythinb including pics. – Arjun Commented Oct 29, 2009 at 23:53
• Why not redo the layout for more than 800x600 – Jim Deville Commented Oct 29, 2009 at 23:56
• You're right James, I guess that's the easiest option available. :( – Arjun Commented Oct 30, 2009 at 0:50

3 Answers 3

There is a zoom CSS property, but it is part of CSS3 and is most likely not widely supported. By setting this on the body element using JavaScript you can zoom the entire page.

I would agree with the sentiments of the answers to the question you linked to though in that it should be up to the user to choose their own zoom settings. If your site is too big/small to see, it indicates a problem with your site design.

You can set all sizes as dynamic (use em for fonts, % for divs/images sizes). Then change the main wrapper and the main font size using javascript.

You can also use CSS switching. Put all the colors and such in one css file. Then create 3 or 4 levels of zoom and inside hardcode different sizes for all the existing classes.

Example:

main.css

a{color:red;}

small.css

a{font-size:10px;}

medium.css

a{font-size:12px;}

Not all designs (in fact I'd wager, none, without targeted style sheets) can cope with the vastly different sizes of screen out there today, from portrait orientated screens at public libraries, to ultra fine artworking Macs with giant landscape screens and tiny little laptops - the latter two often used by executives that have NO understanding of how the zoom features in a browser work and also often have terrible eye sight and little patience.

My suggestion is to use relative sizing like Marcgg suggests. If you're really looking to be super flexible the you could use javascript or browserhawk (or equivalent) to measure the screen sizes and switch out style sheets for those that are really not going to work with your layout.