如何在多个 HTML 页面之间保持缩放级别统一？

Question

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

我如何在页面 home.html -> a.html 和 b.html 之间保持统一的缩放级别，以便无论用户缩放并切换 links，它 在其他页面上保持相同的方式？为此我需要 Javascipt 还是可以使用 CSS 命令来实现？

Answer 1

肯定没办法检测，更不用说用CSS设置浏览器缩放了。

有一种超级不切实际的方法可以粗略地模仿浏览器缩放。您必须将文档包装在容器中，然后更改容器的 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 讨论 transform: scale() 和 zoom.

的值

您也可以探索 this, 这可能更可靠一些，但仍然不切实际。

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

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

在Chrome74和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
}

关于移动设备，在 iOS 10 上，您可以向 touchmove 事件添加事件侦听器，以检测页面是否随当前事件缩放，根据此 answer 来自2016;我相信自那时以来已经取得了更多进展。

无论如何，祝你好运。

Answer 2

嘿，你可以使用 css zoom: 150%;

这个css你可以在所有页面中应用。这使得用户缩放级别相同。

如果您想根据用户交互动态更改缩放级别，请先从页面读取缩放级别并通过 CSS 设置，应用于 body 标签。

Answer 3

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.

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

然而...

防止这种情况（如果发生这种情况）的最简单方法是使用 Turbolinks。它将任何网站变成单页应用程序。这是一段很棒的 open-source 代码，主要用于让 multi-page PWA 在 iOS 上发挥作用，因为 iOS 要求 PWA 是单页应用程序。

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

使用 Turbolinks，从而消除了页面刷新，将导致您的 zoom-level 在您从一个页面单击到另一个页面时不再重置（免责声明：我没有对此进行测试）。

如何在多个 HTML 页面之间保持缩放级别统一？

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

html

css

zooming