electron 如何禁用页面缩放事件？设置zoomlimit方案

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

electron如何禁用页面缩放事件？在以往的经验文章中，苏南大叔已经写过了一篇博文，具体链接见文末。虽然上篇文章的代码，苏南大叔自测通过。但是还是有人表示有不同的观点。所以，在本篇文章里面，关于页面缩放事件，苏南大叔也再次提出一个新的解决方案，那就是：设置zoomlimit。

在本文中，苏南大叔从两个方面来设置zoomlimit，分别是：主进程和渲染进程。测试环境是mac+electron@3.0.1。

前言

鉴于electron的版本很多，禁用electron的页面缩放事件的方案很多，而且页面缩放的触发方式有很多，比如：

• mac的双指缩放
• mac: command+加号/command+减号/command+0
• win: ctrl+加号/ctrl+减号/ctrl+0

那么，苏南大叔建议大家可以多多组合测试。本文提出的方案也可能不会是最好的方案。到底哪个方案适合你，请自行体会。

方案零：一个可能不存在的方案

江湖流传，存在一个参数叫做--disable-pinch：

app.commandLine.appendSwitch('disable-pinch');

但是，在苏南大叔的往期缩放禁用测试中，呼声极高的--disable-pinch参数似乎是不生效的。

方案一：渲染进程监测js事件

当然，在上述链接中，苏南大叔也提出了另外的一个解决方案。那就是在渲染进程中，通过监控缩放事件的一个可行方案。

document.addEventListener('mousewheel', (ev) => {
  if(ev.ctrlKey){
    ev.preventDefault();
    return false;
  }
});
document.addEventListener('mousewheel', (ev) => {
  if(ev.ctrlKey){
    ev.preventDefault();
    return false;
  }
});

大家可以自行了解：

• https://newsn.net/say/electron-disable-pinch.html

方案二：渲染进程设置zoomlimit

在渲染进程里面设置zoomlimit的方案，相当而言，是比较简单的。代码如下：
index.html：

require('electron').webFrame.setZoomLevelLimits(1,1)

这个渲染进程里面的require，就有个限制因素了。就是：

nodeIntegration:true

这个道理，苏南大叔就不详细说明了，大家都明白。

方案三：主进程设置zoomlimit（推荐）

鉴于渲染进程设置zoomlimit的前提是nodeIntegration:true，而这个需求是不一定可以满足的。所以，这里苏南大叔提出了一个新的解决方案，就是在主进程里面设置zoomlimit。代码如下：
main.js:

let webContents=mainWindow.webContents;
webContents.on('did-finish-load`,()=>{
    webContents.setZoomFactor(1);
    webContents.setVisualZoomLevelLimits(1,1);
    webContents.setLayoutZoomLevelLimits(0,0);
});

上述代码，苏南大叔放在了mainWindows创建之后。由于上述代码，并不是写着渲染进程里面的，所以和nodeIntegration没有任何冲突，完美。

相关文章

• https://newsn.net/say/electron-zoomlimit.html

后记

本篇文章中的解决方案，仅仅就考虑了仅一个窗口的情况。而且由于心情原因，苏南大叔也没有特别详细测试每种可能情况。所以，请大家看到本文的时候，分析地发展编写自己的逻辑代码，欢迎您留言表达更佳解决方案。

更多electron的文章，请点击下面的链接：

• https://newsn.net/tag/electron/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。