Question

I want to add a browser zoom effect when a user clicks on a button.
This is for elderly people so they can zoom in on the text to make it easier to read.
I dont want to make the actual text bigger as it will mess up the layout of the webpage.
How can i do this?

I have seen the A A A buttons on several sites which achieve similar.

Answer 1

I would say that if you need that you could create 3 different buttons that would toggle active class on tag and each class should have some font-size definition.

<a data-size="small">small</a>
<a data-size="normal">normal</a>
<a data-size="large">large</a>

$("a").on("click", function(){
    $("html").removeClass().addClass($(this).data("size"));
});

html.small{font-size:12px;}
html.normal{font-size:20px;}
html.large{font-size:36px;}