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?

I think the zoom level is keeping unless you open a new tab. Could you explain in more detail? — Jared Chu, May 17 '19 at 20:34
pretty sure thats handled by the browser and you cant manipulate that with the code — oldboy, May 18 '19 at 01:06
this [css-tricks article](https://css-tricks.com/best-way-programmatically-zoom-web-application/) could be helpful — Pradeepal Sudeshana, May 18 '19 at 02:46
Chrome does it automatically for all tabs/windows with the same domain. I don't like it. — yunzen, May 23 '19 at 07:16
@PaulErlenmeyer: Can you show us an example of how and where this happens (including the browser), so we can actually see and test it for ourselves? I have never seen such strange inconsistent behaviour. — JoostS, May 24 '19 at 08:05
Create 2 html sites with only a header and a link. The link switches the sites back and forth. Now zoom in on any site and press the link. The zoom level resets. — Paul Erlenmeyer, May 24 '19 at 12:30

score 1 · Answer 1 · answered May 20 '19 at 08:53

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.

answered May 20 '19 at 08:53

Arun

1,121
7
15

2

"This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future." – oldboy May 21 '19 at 21:41

oldboy · Accepted Answer · 2019-05-19T04:53:10.647

There is definitely no way to detect, let alone set browser zooming with CSS.

There is one super impractical way to roughly imitate browser zoom. You'd have to wrap your document in a container, and then change the value of the container's transform: scale() or the zoom property, but I'd suggest not even trying to attempt this since it would likely be extremely unreliable. Here is an SO question and answer discussing the transform: scale() and zoom.

You could also explore this, which would likely be a bit more reliable, but still impractical.

There is also no way, I believe, to set the native zoom level of a browser even with JS.

However, you can at least detect the level of zoom, but only in newer browsers. In newer browsers, browser zooming will trigger a window.onresize event.

In Chrome 74 and Firefox 66, you can retrieve the zoom value with the following code.

window.onresize = function(e){
  console.log(e.currentTarget.devicePixelRatio)
  // 0.5 is equal to 50%
  // 1 to 100%
  // 2 to 200%
  // so on and so forth
}

Regarding mobile, on iOS 10 you can add an event listener to the touchmove event to detect if the page is zoomed with the current event, according to this answer from 2016; I'm sure more progress has been made since then.

Anyways, best of luck.

Thanks for ur answer. So lets take stackoverflow for example. Here u can zoom and click on a link at the zoom level will stay the same. How is it done here? — Paul Erlenmeyer, May 19 '19 at 14:46
I mean the website stackoverflow.com as an example for keeping the zoomlevel — Paul Erlenmeyer, May 19 '19 at 22:02
@PaulErlenmeyer its all handled by the browser itself. it has nothing to do with the code of the website stackoverflow, does that answer your question? — oldboy, May 20 '19 at 02:08

JoostS · Answer 3 · 2019-05-31T12:04:38.137

Chrome has a zoom feature that applies to all tabs you’ve got open. It’s universally applied to all tabs from the same domain that you have open.

I have never heard of zoom levels that resetted spontaniously. I always face the opposite problem: weird zoom levels that are remainders of earlier online activities.

However...

The simplest way to prevent this (should this happen) is to use Turbolinks. It turns any website into a single page application. It is a terrific piece of open-source code that is mostly being used to let multi-page PWA's function on iOS, as iOS requires PWA's to be single page applications.

It replaces the actual page load by a ajax call and uses javascript to rewrite the content of the page.

Using Turbolinks, thus eliminating the page refreshes, will cause your zoom-level to no longer be reset when you click from one page to another (diclaimer: I did not test this).

thats an intersting approach like an SPA or something that doesnt load a diff page but just manipulated the current page — oldboy, May 24 '19 at 23:31

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

3 Answers3