Question

我有多个 html 网页，它们遵循相同的布局。我的意思是说，他们都有相同的横幅，顶部是网站名称，下面是导航栏（具有相同链接），等等。我的问题是，当用户访问该网站并手动缩放（按住CTRL +鼠标滚轮），然后访问链接到具有相同布局的另一个网页的链接时，缩放级别会重置为默认。例如，如果我只放大默认缩放比例的5％并访问链接，则缩放比例将5％重置为默认缩放比例。

我如何在页面home.html-> a.html和b.html之间保持统一的缩放级别，以便无论用户缩放和切换链接时，它都会在其他页面上保持不变？我需要Javascipt还是可以使用CSS命令来做到这一点？

Answer 1

嘿，您可以使用CSS zoom: 150%;

您可以在所有页面中应用此CSS。从而使用户缩放级别相同。

如果要基于用户交互动态更改缩放级别，请首先从页面读取缩放级别并通过CSS设置，将其应用于body标签。

Answer 2

绝对没有办法检测，更不用说使用CSS设置浏览器缩放了。

有一种超级不切实际的方法来大致模拟浏览器缩放。您必须将文档包装在容器中，然后更改容器的transform: scale()或zoom属性的值，但我建议甚至不要尝试尝试此操作，因为这很可能会非常不可靠。 SO question和answer讨论了transform: scale()和zoom。

您还可以探索this,，它可能更可靠，但仍然不切实际。

我相信，即使使用JS，也无法设置浏览器的本机缩放级别。

但是，您至少可以检测到缩放级别，但只能在较新的浏览器中。在较新的浏览器中，浏览器缩放将触发window.onresize事件。

在Chrome 74和Firefox 66中，您可以使用以下代码检索缩放值。

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
}

关于移动设备，根据2016年的answer，您可以在iOS 10上向touchmove事件添加事件侦听器，以检测页面是否被当前事件放大；我敢肯定，自那时以来已经取得了更多进展。

无论如何，祝你好运。

Answer 3

Chrome浏览器具有缩放功能，该功能适用于您打开的所有标签页。它普遍适用于您打开的同一域中的所有标签。

我从未听说过自动重置的缩放级别。我总是面临相反的问题：奇怪的缩放级别是早期在线活动的剩余部分。

但是...

防止这种情况发生的最简单方法是使用Turbolinks。它将任何网站变成一个页面应用程序。这是一个很棒的开源代码，主要用于在iOS上启用多页PWA的功能，因为iOS要求PWA必须是单页应用程序。

它用ajax调用替换实际的页面加载，并使用javascript重写页面内容。

使用Turbolinks从而消除了页面刷新，当您从一页单击到另一页时，将不再重置缩放级别（免责声明：我没有对此进行测试）。

如何使多个HTML页面之间的缩放级别保持一致？

3 个答案: