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

electron 如何禁用页面缩放事件?设置zoomlimit方案 - electron-pinch-zoomlimit
electron 如何禁用页面缩放事件?设置zoomlimit方案(图4-1)

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

前言

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

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

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

在苏南大叔的往期缩放禁用测试中,呼声极高的--disable-pinch参数似乎是不生效的。相关信息,详见下面这个链接:

渲染进程设置zoomlimit

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

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

electron 如何禁用页面缩放事件?设置zoomlimit方案 - renderer-01
electron 如何禁用页面缩放事件?设置zoomlimit方案(图4-2)

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

nodeIntegration:true

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

electron 如何禁用页面缩放事件?设置zoomlimit方案 - renderer-02
electron 如何禁用页面缩放事件?设置zoomlimit方案(图4-3)

主进程设置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);
});

electron 如何禁用页面缩放事件?设置zoomlimit方案 - main-code
electron 如何禁用页面缩放事件?设置zoomlimit方案(图4-4)

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

相关文章

后记

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

更多electron的文章,请点击下面的链接:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   electron

本站的忠实读者小伙伴,正在阅读下面这些文章: