0

I have created an unpublished website using HTML, CSS & JavaScript and I would like to ensure that when you click onto another page, it will always load at 100% zoom (or at least 100% in chrome).

I have attempted this by using the constantly recommended feature 'initial-scale':

<meta name="viewport" content="width=device-width, initial-scale=1">

This works fine when a page is first loaded, but if you zoom in (e.g. to 50%) then leave that page then return to it, the zoom is still at 50% rather than resetting to 100%.

I would like the zoom to become 100% every time a page is visited independent of previous visits.

Thanks in advance!

MortisMc
  • 1
  • 1
  • 1
    Out of curiosity, why would you want to do that? I mean, if the user changes the zoom, I suppose it is because the new zoom makes the page look better for him. – Hernán Alarcón Jan 03 '21 at 23:06
  • @HernánAlarcón It is mainly for personal preference when I'm trying to fix issues with my website. But also I don't recall seeing a website that acts like this before. If there is some kind of convention that I'm missing then please let me know :) – MortisMc Jan 07 '21 at 19:22

1 Answers1

0

You can do the following on page load:

(function() {

    var scale = 'scale(1)';
    document.body.style.webkitTransform =  scale;    // Chrome, Opera, Safari
    document.body.style.msTransform =   scale;       // IE 9
    document.body.style.transform = scale;     // General

})();

The above function() format is a short-hand form of jQuery's $(document).ready().

Refer to this post on Stackoverflow: Force page zoom at 100% with JS

Hope this answers your question!

Rod911
  • 654
  • 5
  • 12
Atheesh Thirumalairajan
  • 625
  • 1
  • 2
  • 13
  • I haven't come across "page load" yet but I will certainly give this a go when I am more familiar. Thank you very much :D – MortisMc Jan 07 '21 at 19:25
  • The code above is executed when all the elements in the page complete loading and the DOM is ready. Write the above in `` tag and it will work – Atheesh Thirumalairajan Jan 08 '21 at 07:07
  • I'm afraid this didn't solve my problem as this only changes how zoomed in the page looks as opposed to changing the actual zoom of the browser. I believe my issue may be solved using react-router-dom so the pages all come from the same index.html file. (I am currently using a separate HTML file for each page). Thanks Anyway though. – MortisMc Jan 13 '21 at 20:00