有没有办法在重新加载页面时将缩放级别重置为 100%？答案

【问题标题】：Is there a way to make the zoom level reset to 100% upon reloading a page?有没有办法在重新加载页面时将缩放级别重置为 100%？
【发布时间】：2021-04-09 19:59:26
【问题描述】：

我使用 HTML、CSS 和 JavaScript 创建了一个未发布的网站，我想确保当您点击另一个页面时，它始终会以 100% 缩放（或至少 100% 的 chrome 浏览器）加载。

我已经尝试过使用经常推荐的功能“初始规模”：

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

当第一次加载页面时，这可以正常工作，但如果您放大（例如到 50%）然后离开该页面然后返回到它，缩放仍然是 50%，而不是重置为 100%。

我希望每次访问页面时都将缩放设为 100%，而与之前的访问无关。

提前致谢！

【问题讨论】：

出于好奇，您为什么要这样做？我的意思是，如果用户更改缩放比例，我想这是因为新的缩放比例让页面看起来更适合他。
@HernánAlarcón 当我试图解决我的网站问题时，这主要是出于个人喜好。但我也不记得以前见过这样的网站。如果我缺少某种约定，请告诉我:)

标签： javascript html css zooming scale

【解决方案1】：

您可以在页面加载时执行以下操作：

(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

})();

上面的function()格式是jQuery的$(document).ready()的简写形式。

请参阅 Stackoverflow 上的这篇文章：Force page zoom at 100% with JS

希望这能回答你的问题！

【讨论】：

我还没有遇到过“页面加载”，但是当我更熟悉时，我一定会尝试一下。非常感谢：D
当页面中的所有元素都加载完毕并且DOM准备就绪时执行上面的代码。将上述内容写在<script></script>标签中，它会起作用
恐怕这并没有解决我的问题，因为这只会改变页面的放大效果，而不是改变浏览器的实际缩放比例。我相信我的问题可以使用 react-router-dom 解决，因此所有页面都来自同一个 index.html 文件。（我目前为每个页面使用单独的 HTML 文件）。不过还是谢谢。