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

html zoom page to fit
how to set browser zoom level to 100 using javascript
document body style zoom
how do i keep my website content from moving during zoom
set browser zoom to 100
javascript zoom page
javascript zoom page to fit
css zoom page to fit

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?

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.

Adjusting zoom settings in Chrome browser, There are 2 ways to adjust the zoom settings: Permanently set the zoom level for all pages you can hold down the keyboard Ctrl key and use the mouse wheel to zoom in or out. To adjust the default magnification level so all pages open at a specific zoom level, click Export & Import Chrome bookmarks to an HTML file​  Forcing inline-block Elements on One Line. To get all elements to appear on one line the easiest way is to: Set white-space property to nowrap on a parent element that has overflow-x: auto set to show horizontal scrollbars.

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.

Font Resizing Guidance, The first method is to use relative text sizes, designing the page such that content a mechanism on screen that allows users to adjust text size between specific, typically use the CSS 'float' property to create multiple columns of content that Zooming allows content to be enlarged uniformly at the current aspect within  Create a DWORD value named ZoomDisabled. 5. Double-click ZoomDisabled and set its data to 1. If you didn’t set the desired zoom level in step 1 or want to change it in the registry later, use these steps: 6. Create a DWORD value named ZoomFactor. 7. Double-click ZoomFactor and set its data to 186a0 (for 100%).

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).

How To Create Equal Width Menu Links, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  Is there any way to have multiple distinct HTML pages contained within a single HTML file? For example, suppose I have a website with two pages: Page 1 : click here for page 2 and. Page 2 : click here for page 1 Can I create a single HTML file that embeds simple static HTML for both pages but only displays one at a time?

How to zoom all tabs in one size in Excel?, However, how can you zoom all tabs in a workbook to the same size at the One Workbook to Multiple Excel, PDF or CSV Files; One Column to Multiple Columns. hold Shift key to select the last tab in the Sheet tab bar, then drag zoom slider Layout (easily read and edit large numbers of cells); Paste to Filtered Range. However, this works only when the browser zoom level is 100% . When I increase or decrease the zoom level, the quality of the images decrease. Some clients actually have different zoom levels by default.

[PDF] TCS Digital Software & Solutions Group, familiar with the Visualization Framework. The documents or revised pages are subject to document control. Keep them up-to-date using the release notices  Click/tap on Magnifier on the left side, and change the Zoom level increments on the right side under Magnifier options to the percentage you want. (see screenshot below) Starting with Windows 10 build 17643, Microsoft added two new increments to the list: 5% and 10%.

Adjusting PDF views, Zoom To Page Level adjusts the magnification so that one page fills the To resize the page to fit entirely in the document pane, choose View The Spreadsheet Split view is useful if you want to keep column Also, scrolling is coordinated between the panes. View a document in multiple windows. I have 2 HTML pages and in the 1st HTML page there are 2 JavaScript Variables & I want to pass the values of those 2 to another 2 variables in the 2nd HTML page. I am expecting an answer not using HTML 5 .

Comments
  • I think the zoom level is keeping unless you open a new tab. Could you explain in more detail?
  • pretty sure thats handled by the browser and you cant manipulate that with the code
  • this css-tricks article could be helpful
  • Chrome does it automatically for all tabs/windows with the same domain. I don't like it.
  • @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.
  • 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?
  • im not sure what youre asking? what example?
  • I mean the website stackoverflow.com as an example for keeping the zoomlevel
  • @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?
  • "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."
  • thats an intersting approach like an SPA or something that doesnt load a diff page but just manipulated the current page