Html Question posted in
Some basic documentation can be found here.

Html – How can I make the page redirect if the zoom level is not 80%?

I have two HTML files: index.html and zoomerror.html.
The site only displays properly at a browser zoom level of 80%. Is there a way that I can use Javascript to detect the zoom level non-stop and redirect the page from index.html to zoomerror.html if the browser zoom level changes from 80% to some other level? I could not think of any code to do that.

EDIT: See the answer for details.

I tried to use the window.devicePixelRatio function for this, but it just caused the page to constantly refresh, even though the zoom level was 80%.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Nevermind, I fixed it. Click here for the site that helped me. Here is the working code, which works better on a real site than a file URL:

    setInterval(function(){
  var zoomLevel = Math.round(((window.outerWidth) / window.innerWidth) * 100);
  if (zoomLevel != 80) {
    window.location.replace("zoomerror.html");
  }
}, 850);

  2. 0

    To solve your problem, I’ll provide some javascript code that detects the current browser size and what to do next. This code allows the browser to detect resizing and redirect pages accordingly.

    // Get the current browser scale
var zoomLevel = Math.round(window.devicePixelRatio * 100);

// Agar masshtab 80% dan katta bo'lsa
if (zoomLevel >= 80) {
    // Agar shkala 80% dan katta bo'lsa
    window.location.href = 'index.html';
} else {
    // redirect to zoomerror.html
    window.location.href = 'zoomerror.html';
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search