37

有没有办法在电子应用程序中禁用捏放大？

我无法使用此处描述的普通 javascript 方法从 web 视图内部工作：https ://stackoverflow.com/a/23510108/665261

似乎电子不支持--disable-pinch该标志。

我已经尝试了各种方法，使用：

  1. event.preventDefault()关于 javascripttouchmove/mousemove事件
  2. meta viewportHTML中的标签
  3. -webkit-text-size-adjust在 CSS 中
  4. 电子的标志/配置

一般的 webkit 或特别是电子有什么方法吗？

4

9 回答 9

29

更新 2：

在渲染进程中使用webFrame.setZoomLevelLimits ( v0.31.1+) （主进程和渲染进程的区别）。因为 mac 上的智能缩放仍然适用于 document.addEventListener。

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

更新：

deltaY捏缩放属性具有float值，但正常滚动事件返回int值。现在解决方案对 ctrl 键没有问题。

演示 2。

document.addEventListener('mousewheel', function(e) {
  if(e.deltaY % 1 !== 0) {
    e.preventDefault();
  }
});

使用 ChromiummonitorEvents(document)我发现负责此事件mousewheel。我不知道，为什么mousewheel用捏缩放触发。下一步，找出普通滚动和捏缩放之间的区别。

捏缩放有一个属性e.ctrlKey = true，普通滚动事件有e.ctrlKey = false。但是，如果您按住ctrl键并滚动页面，则e.ctrlKey等于true。

我找不到更好的解决方案。:(

演示

document.addEventListener('mousewheel', function(e) {
  if(e.ctrlKey) {
    e.preventDefault();
  }
});
于 2015-05-01T20:25:51.163 回答
3

桌面浏览器似乎很难防止捏缩放。

这里有一些想法！

1) 通过使用一些手势 javascript，如hammer.js，检测 Pinch 事件并尝试使用 e.preventDefault 阻止它

或者

2) 在 css 中使用“%”设计所有内容，或使用“vm”等较新的单位（如果可能）。这样，即使页面将被缩放，但任何缩放级别的内容都将保持不变。

祝一切顺利！

于 2015-05-06T08:33:26.383 回答
2

来自GitHub的回答：

“如果您正在寻找一种防止主进程缩放的方法，您可以使用：”

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

mainWindow在你拥有的地方是可变的new BrowserWindow，例如：

const mainWindow = new BrowserWindow({
  width: 440,
  height: 750,
  // ...
});

const webContents = mainWindow.webContents;
webContents.on("did-finish-load", () => {
  webContents.setZoomFactor(1);
  webContents.setVisualZoomLevelLimits(1, 1);
  webContents.setLayoutZoomLevelLimits(0, 0);
});
于 2020-02-14T11:39:33.403 回答
1

有没有你不能使用的原因：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

把它放在标题中，它可以防止设备缩放。

于 2015-05-04T13:50:28.360 回答
1

我苦苦寻找一个简单的解决方案来解决这个问题却无济于事......但后来我发现了一个名为 fullpage.js 的插件，它能够防止捏缩放，同时仍然允许触摸手势。通过 js/css 淘汰的过程，我发现了一个非常简单的解决方案：

touch-action: none;

将此添加到我的整页元素中成功地防止了捏缩放，但允许我通过捏缩放 fabricjs 对象。万岁！

于 2017-08-04T07:46:44.380 回答
1 
var app = require('electron')
app.commandLine.appendSwitch('disable-pinch');

通过混合这两个链接找到的解决方案：

1 - https://github.com/electron/electron/issues/8793#issuecomment-289791853

2 - https://github.com/electron/electron/blob/master/docs/api/chrome-command-line-switches.md

于 2018-07-18T13:58:58.473 回答
1

我必须进行设置{ passive: false }以使其正常工作。不要问我为什么。

window.addEventListener('wheel', (e) => {
  if(e.ctrlKey) e.preventDefault();
}, { passive: false });
于 2020-07-01T08:35:12.180 回答
0

元标记应该有效。尝试使用 minimum-scale=1.0 

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">

如果它也不起作用，那么添加最小和最大比例

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

PS：它只会在手机上禁用缩放。

于 2015-05-06T11:05:47.690 回答
0

我得到了最简单的解决方法，在您项目的 index.html 或类似文件中，在脚本标签中，包括电子并配置缩放级别，如下所示，

<script>
const electron = require('electron'); // Include electron
electron.webFrame.setZoomLevelLimits(1, 1); // Set min max zoom level as 1
const { ipcRenderer } = electron;
...
</script>

这在设备上运行得非常好。视口元标记方法在台式机上效果不佳，仅修复了移动设备上的问题。

于 2018-03-15T17:58:29.443 回答