0

When you surf with your browser, you can increase or decrease the font dimension by pressing CTRL + + or CTRL + -.

Is there a way to simulate this operation by code (like javascript)?

I have to put a couple of button on my site to increase or decrease the size but to make it, I have to change dynamically a lot of font-size properties (BODY, INPUT, OPTIONS etc...)

JNYRanger
  • 6,829
  • 12
  • 53
  • 81
MrMime
  • 665
  • 4
  • 10
  • 24
  • http://mattgemmell.com/2008/12/08/what-have-you-tried/ – KooiInc Jun 21 '12 at 07:24
  • What have you tried? you're not the first guy needed to change the font size in his site you know... Did you search for an answer first? – gdoron Jun 21 '12 at 07:24
  • possible duplicate of [triggering browser Zoom-in and Zoom-out funtions](http://stackoverflow.com/questions/4539955/triggering-browser-zoom-in-and-zoom-out-funtions) – Jon Jun 21 '12 at 07:25
  • @KooiInc I prefer this: http://whathaveyoutried.com redirects to the same thing.. :D – Baz1nga Jun 21 '12 at 07:26

1 Answers1

4

Don't do this. Browser zoom is a feature that:

  • may or may not be present in a browser,
  • is implemented in different ways through browsers,
  • only exists as a last-resort plumbing for bad websites.

a couple of button on my site to increase or decrease the size but to make it, I have to change dinamically a lot of font-size properties

What you really want to do is:

  • Scale your fonts in relative units (like em or %) everywhere,
  • Change document.body.style.fontSize to modify your base size (which other elements will use as their base size).

Specify the body's font size in relative units too - In this way you can also respect the user's system settings (which every decent website should do).

There's plenty of resources on CSS font scaling around. Here's one:

http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Kos
  • 70,399
  • 25
  • 169
  • 233
  • There is also a solution called "responsive design", which adapts to the cbrowsers better than just using relative units. – Tadeck Jun 21 '12 at 07:44
  • AFAIK "responsive design" is about having (mainly) the layout adapt to the device (w/r/t the screen size, etc). These two sure can be used togehter – Kos Jun 21 '12 at 07:56