使用 javascript 按钮控制浏览器缩放

Posted 2023-03-06

【中文标题】使用 javascript 按钮控制浏览器缩放

【英文标题】：Control browser zoom with javascript buttons

【发布时间】：2021-12-27 03:49:39

【问题描述】：

您好，我已经看到了几种使用 javascript 控制文本大小的方法，但我总是发现最好的放大和缩小方法是在响应式布局上使用 ctrl - cmd & +/-。

我非常喜欢我的手机/平板电脑布局在浏览器放大后的样子。有没有办法使用 JavaScript 按钮来实际控制网络浏览器的缩放功能。所以点击加号按钮的效果和 ctrl - cmd & + 一样吗？而不是模仿我希望它实际控制浏览器缩放功能的功能。

我玩过这个 css，我可以使用 Javascript 来增加和减少级别：

body 
   -moz-transform: scale(2);
   zoom: 2;
   zoom: 200%;

但虽然放大了，但它也会提供水平滚动条，因此从不显示我创建的平板电脑或移动设备布局。

有没有办法在 Javascript 中做到这一点？我需要它是跨浏览器的，可供公众使用且不涉及任何开发工具。

谢谢

【参考方案1】：

chrome 开发工具中的响应式布局怎么样？ https://developer.chrome.com/docs/devtools/device-mode/

然后将其更改为移动或平板设备，然后您可以使用以下方式放大：

document.body.style.zoom = "100%";

【讨论】：

谢谢，但恐怕这行不通。缩放是非标准的，在 Firefox 中不起作用。我需要它是跨浏览器的，可供公众使用且不涉及任何开发工具。我已经编辑了我的问题以反映这一点。