How to keep the zoom level uniform between multiple HTML pages?

Question

I have multiple html webpages that follow the same layout. By that I mean that they all have the same banner with the website name on the top, a navigation bar below that (with the same links), etc. . My problem is when a user visits the website and manually zooms (by holding CTRL + Mousewheel) and then visits a link that links to another webpage with the same layout, the zoom level gets reset to the default one. For example if I just zoom in by 5 % more than the default zoom was and visit a link, the zoom resets by -5 % to the default one.

How do I keep a uniform zoom level between the pages home.html -> a.html and b.html, so that, whereever the user zooms and switches the links, it stays the same way on the other pages? Do I need Javascipt for that or can I do that with a CSS command?

Answer 1

Hey you can use css zoom: 150%;

This css you can apply in all the pages. which makes the user zoom level same.

If you want to change the zoom level dynamically based on the user interaction, first read the Zoom level from the page and set via CSS, apply to body tag.