javascript 在 webkit（或电子）中禁用双指缩放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29929411/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable pinch zoom in webkit (or electron)
提问by Billy Moon
Is there any way to disable pinch zoom in an electronapp?
有没有办法在电子应用程序中禁用捏缩放？
I can't get it to work from inside the web-view with normal javascript methods as described here: https://stackoverflow.com/a/23510108/665261
我无法使用正常的 javascript 方法从 web 视图内部工作，如下所述：https: //stackoverflow.com/a/23510108/665261
It seems the --disable-pinchflag is not supported by electron.
似乎该--disable-pinch标志不受电子支持。
I have experimented with various methods using:
我已经尝试了各种方法，使用：
event.preventDefault()on javascripttouchmove/mousemoveeventsmeta viewporttags in HTML-webkit-text-size-adjustin CSS- flags/config for electron
event.preventDefault()关于 javascripttouchmove/mousemove事件meta viewportHTML 中的标签-webkit-text-size-adjust在 CSS 中- 电子的标志/配置
Is there any method either for webkit in general, or electronin particular?
有没有一般的 webkit 方法，或者特别是电子的方法？
采纳答案by artanik
UPDATE 2:
更新 2：
Use webFrame.setZoomLevelLimits(v0.31.1+) in render process(Differences Between Main Process and Renderer Process). Because smart zoom on mac still work with document.addEventListener.
在渲染过程中使用webFrame.setZoomLevelLimits(v0.31.1+) （Main Process and Renderer Process之间的差异）。因为 mac 上的智能缩放仍然可以与 document.addEventListener 一起使用。
Example require('electron').webFrame.setZoomLevelLimits(1, 1)
例子 require('electron').webFrame.setZoomLevelLimits(1, 1)
UPDATE:
更新：
deltaYproperty for pinch zoom has floatvalue, but normal scroll event return intvalue. Now solution has no problem with ctrl key.
deltaY捏缩放的属性有float值，但正常的滚动事件返回int值。现在解决方案对 ctrl 键没有问题。
演示 2。
document.addEventListener('mousewheel', function(e) {
if(e.deltaY % 1 !== 0) {
e.preventDefault();
}
});
Using Chromium monitorEvents(document)I found that is responsible for this event mousewheel. I don't know, why mousewheeltriggered with pinch zoom.
Next step, find difference between normal scroll and pinch zoom.
monitorEvents(document)我发现使用 Chromium是造成此事件的原因mousewheel。我不知道，为什么mousewheel用双指缩放触发。下一步，找出普通滚动和捏合缩放之间的区别。
Pinch zoom has an attribute e.ctrlKey = true, and normal scroll event has e.ctrlKey = false. But if you hold down ctrlkey and scroll a page, e.ctrlKeyequal true.
捏缩放有一个属性e.ctrlKey = true，普通滚动事件有e.ctrlKey = false。但是，如果您按住ctrl键并滚动页面，则e.ctrlKey等于true.
I couldn't find a better solution. :(
我找不到更好的解决方案。:(
document.addEventListener('mousewheel', function(e) {
if(e.ctrlKey) {
e.preventDefault();
}
});
回答by Sandeep
It seems very difficult for desktop browser to prevent pinch zoom.
桌面浏览器似乎很难防止捏缩放。
Here are some ideas though!
这里有一些想法！
1) By using some gestures javascript like hammer.js, detect Pinch event and try to prevent it using e.preventDefault
1) 通过使用一些手势 javascript，如hammer.js，检测捏合事件并尝试使用 e.preventDefault 阻止它
OR
或者
2) Design everything using "%" in css, or use newer units like "vm" etc, (if possible). This way, even page will be zoomed, but content will stay the same for any zoom level.
2) 在 css 中使用 "%" 设计所有内容，或使用更新的单位，如 "vm" 等（如果可能）。这样，即使页面也会被缩放，但内容在任何缩放级别都将保持不变。
All the best!
一切顺利！
回答by michal
Answer from GitHub:
来自GitHub 的回答：
"If you are looking for a way how to prevent zoom from mainprocess, you can use:"
“如果您正在寻找一种防止主进程缩放的方法，您可以使用：”
const webContents = mainWindow.webContents;
webContents.on('did-finish-load', () => {
webContents.setZoomFactor(1);
webContents.setVisualZoomLevelLimits(1, 1);
webContents.setLayoutZoomLevelLimits(0, 0);
});
mainWindowis variable where you have new BrowserWindow, e.g.:
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);
});
回答by Carlos Oliveira
var app = require('electron')
app.commandLine.appendSwitch('disable-pinch');
Solution found by mixing these two links:
通过混合这两个链接找到的解决方案：
1 - https://github.com/electron/electron/issues/8793#issuecomment-289791853
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
2 - https://github.com/electron/electron/blob/master/docs/api/chrome-command-line-switches.md
回答by J. Barca
I searched so long and hard for a simple solution to this problem with no avail...but later I discovered a plugin called fullpage.js that was able to prevent pinch zoom while still allowing touch gestures. Through the process of js/css elimination, I discovered a very simple solution:
我搜索了这么长时间并努力寻找解决这个问题的简单解决方案但无济于事……但后来我发现了一个名为 fullpage.js 的插件，它能够在仍然允许触摸手势的同时防止捏缩放。通过js/css淘汰的过程，我发现了一个很简单的解决方法：
touch-action: none;
Adding this to my full page element successfully prevented pinch zoom but allowed me to scale fabricjs objects with pinching. Hooray !
将此添加到我的整页元素成功阻止了捏缩放，但允许我通过捏缩放 fabricjs 对象。万岁！
回答by Krishna Modi
I got the easiest fix for this, in the index.html or similar file for your project, within the script tag, include electron and configure zoom level as below,
我得到了最简单的解决方法，在你的项目的 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>
This works perfectly fine across devices. The viewport meta tag approach doesn't work well on desktop, only fixes issue on mobile devices.
这在设备上运行得非常好。视口元标记方法在桌面上效果不佳，只能修复移动设备上的问题。
回答by Kapil Garg
meta tag should have worked. Try using the minimum-scale=1.0
元标记应该有效。尝试使用 minimum-scale=1.0
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
And if it also not works then add both the minimum and maximum scale
如果它也不起作用，则添加最小和最大比例
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
P.S. : It will disable zooming on mobile phones only.
PS：它只会在手机上禁用缩放。
回答by cawney
Is there a reason why you can't use:
有什么原因你不能使用：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
Put that in the header and it keeps devices from zooming.
把它放在标题中，它可以防止设备缩放。
