Tutorial :possible to auto zoom out if user's resolution < x?



Question:

my site is aimed purely at the laptop market (dont ask why or argue!), all my users (or 95%+) we on a screen width of 1200+,

netbooks are now taking off, with a resolution of 1024 wide.

my site still looks great on a netbook if you zoom out once (ctrl-minus), but i don't want to rely on users knowing about ctrl-minus.

what are my options besides redesign? I'm keen not to have zoom buttons on my page.

is there a javascript zoomer outer?!!!


Solution:1

While this doesn't sort out your zoom, you could try a little trick based on CSS & relative sizing.

If you have an image or a container that is 100px wide, try setting it to 10em wide (or faff with the em amount until you find the appropriate value). Eventually, if you do this to every single dimension specified upon your site, you'd be able to actively shrink the page by changing the default font-size. E.g. from 1em, to 0.91em.

People often use the relative sizing to allow people the flexibility of being able to shrink and grow font sizes as they want. It's not as commonly used on images (because they are by requirement, fixed in size). This needn't be the case though, and in this instance, might offer you a way out of a "full site redesign" and giving the effect of "zooming".

This might solve the problem without redesign, but may be tricky and would require a bit of testing. The way stylesheets cascade, shrinking the font a little more, element by element, might cause a few issues.


Solution:2

  • detect screen resolution via JS
  • apply appropriate CSS

ctrl + - is the browser feature and you should never rely on that.

try this article http://www.alistapart.com/articles/alternate/ or try to google "javascript switch css"


Solution:3

this is a bad idea for many reasons. zooming is client specific so you will run into cross browser compatibilities if even possible at all. your best bet is to use css and set a min and/or max width. you don't need to redesign but (assuming proper html structure and usage of external css) changing some width values should do the trick.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »