views:

1149

answers:

2

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 http://stackoverflow.com/questions/826708/setting-ie-optical-zoom-feature-using-javascript-css that got no good replies.

+1  A: 

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;}
marcgg
yes, but what about images?
Arjun
well set sizes on images as well using the "height" and "width" css property
marcgg
might as well redesign the layout :) cheers for your help
Arjun
+1  A: 

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.

adrianbanks
It's supported well in IE, but not FF yet.
jheddings
I've tried it in IE8 and Chrome v4 and it seems to work well in those, but not in Opera v9 or FireFox v2.
adrianbanks
This won't work with older browsers so I wouldn't recommend it if you care about cross browser compatibility.
marcgg