在 Firefox 和 Chrome 中使用 Javascript 来 CTRL+ 和 CTRL-答案

【问题标题】：Use Javascript to CTRL+ and CTRL- in Firefox & Chrome在 Firefox 和 Chrome 中使用 Javascript 来 CTRL+ 和 CTRL-
【发布时间】：2011-07-15 14:02:56
【问题描述】：

我想让用户能够增加/减少网络应用内内容的呈现大小。

CTRL+ 和 CTRL- 功能（或 CTRL1 到 CTRL9) 很方便 - 但是 JavaScript 有没有办法执行这些功能？

说明： 我希望用户能够通过鼠标点击而不是按键来实现这一点，所以像这样：

function resize_rendering() {
    // code that executes ctrl+ or crtl-
}

【问题讨论】：

我认为您无法模仿浏览器的该功能，因为它是浏览器中的个人设置。 CTRL+/- 实际上放大了所有部分，甚至是图像。要使用 javascript 做到这一点，您必须增加网站上图像和文本的大小。我所看到的是人们只是增加字体大小，使用 Javascript.. 但不是图像。

标签： javascript firefox google-chrome

【解决方案1】：

浏览器缩放级别是用户设置，用于访问目的；它并不打算让网站开发人员知道或关心缩放级别是什么，所以我希望你在做你想要的事情时会遇到麻烦。当然，很难以跨浏览器工作的方式正确处理它。

解决这个问题的正常方法是使用一个大小调整小工具来更改基本字体大小。

如果您网站中的所有字体大小都以em 为单位，那么您可以通过一次 CSS 更改来更改网站上所有文本的大小。

因此，您将在网站上有一组按钮，这些按钮使用 Javascript 将 <body> 元素的 font-size 设置为（例如）12、14、16 或 18 像素，具体取决于单击的元素。

这里有一篇关于该技术的文章：http://labnol.blogspot.com/2006/12/allow-site-visitors-to-change-font.html

【讨论】：

这就是我的想法，真是太糟糕了。谢谢 :(

【解决方案2】：

设计不允许您这样做。您不能通过 Javascript 更改用户的浏览器设置。

您可以做其他事情，例如修改页面上的所有 CSS 以将所有内容缩小到模拟 CTRL-，但仅此而已。

在某些浏览器中，您可以在浏览器执行之前捕获 CTRL+/-，从而阻止这些事件的发生。但是你不能做相反的事情——你不能让这些事件发生在你自己的脚本中。

【讨论】：

【解决方案3】：

John Resig 的这个库 here 是一个 jQuery 插件，应该可以完成这项工作。有一些样品。它也很容易连接键组合。

【讨论】：

【解决方案4】：

您可以在通用键事件处理程序中拦截击键（例如在 window 对象上），检查它是否是您要查找的，如果是，请在事件参数上调用 stopPropagation() （并返回 false）以防止浏览器自行处理它。

然后您必须自己执行大小调整操作，例如使用 JavaScript 修改样式表。

window.addEventListener( 'keydown', function( e ) {
    if ( /* check e.keyCode etc. */ ) {
        // modify global style to increase/decrease font size
        e.stopPropagation();
        return false;
    } );

【讨论】：

我实际上正在寻找一种方法来做到这一点，而用户不必使用按键（可能是滑块，或者他们可以使用的其他类似的东西）
抱歉，误解了这个问题。当然可以使用网页上的控件来修改基本样式表，就像我建议的那样。但我不知道是否可以真正调用浏览器的原生功能。
你没有误会，是我的错。我重新阅读了我的问题，它很模糊，所以我添加了澄清。不过感谢您的回答。

【解决方案5】：

查看 CSS 属性“缩放”

/* ctrl++ */
body {
   zoom: 1.1;
}

对于 JS，就像：

function resize_rendering(zoom) {
   let currentZoom = parseFloat(document.body.style.zoom) || 1
   document.body.style.zoom = currentZoom * zoom
}

resize_rendering(1.1) // ctrl++
resize_rendering(0.9) // ctrl+-

【讨论】：