在 webkit(或电子)中禁用捏缩放

2023-01-29前端开发问题
6

本文介绍了在 webkit(或电子)中禁用捏缩放的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

有没有办法在 electron 应用程序中禁用捏合缩放?

Is there any way to disable pinch zoom in an electron app?

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

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

似乎 --disable-pinch 标志是 电子不支持.

我尝试了各种方法:

  1. event.preventDefault() on javascript touchmove/mousemove 事件
  2. meta viewport HTML 中的标签
  3. -webkit-text-size-adjust 在 CSS 中
  4. 电子的标志/配置
  1. event.preventDefault() on javascript touchmove/mousemove events
  2. meta viewport tags in HTML
  3. -webkit-text-size-adjust in CSS
  4. flags/config for electron

有没有一般的 webkit 方法,或者特别是 electron?

Is there any method either for webkit in general, or electron in particular?

推荐答案

更新 2:

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

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.

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

更新:

deltaY 属性具有 float 值,但正常滚动事件返回 int 值.现在解决方案用ctrl键没有问题.

deltaY property for pinch zoom has float value, but normal scroll event return int value. Now solution has no problem with ctrl key.

演示2.

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

<小时>

使用 Chromium monitorEvents(document) 我发现负责这个事件 mousewheel.我不知道,为什么 mousewheel 用捏缩放触发.下一步,找出普通滚动和捏缩放之间的区别.


Using Chromium monitorEvents(document) I found that is responsible for this event mousewheel. I don't know, why mousewheel triggered with pinch zoom. Next step, find difference between normal scroll and pinch zoom.

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

Pinch zoom has an attribute e.ctrlKey = true, and normal scroll event has e.ctrlKey = false. But if you hold down ctrl key and scroll a page, e.ctrlKey equal true.

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

I couldn't find a better solution. :(

演示

document.addEventListener('mousewheel', function(e) {
  if(e.ctrlKey) {
    e.preventDefault();
  }
});

这篇关于在 webkit(或电子)中禁用捏缩放的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

The End

相关推荐

layui实现laydate日历控件控制之前日期不可选择
具体实现代码如下: laydate.render({ elem: '#start_time', min:0, //,type: 'date' //默认,可不填}); 只要加一个min参数,就可以控制了。0表示之前的日期不可...
2024-11-29 前端开发问题
133

js删除数组中指定元素的5种方法
在JavaScript中,我们有多种方法可以删除数组中的指定元素。以下给出了5种常见的方法并提供了相应的代码示例: 1.使用splice()方法: let array = [0, 1, 2, 3, 4, 5];let index = array.indexOf(2);if (index -1) { array.splice(index, 1);}// array = [0,...
2024-11-22 前端开发问题
182

layui 实现实时刷新一个外部的div
主页面上显示了一个合计,在删除和增加的时候需要更改这个总套数的值: //html代码div class="layui-inline layui-show-xs-block" style="margin-left: 10px" id="sumDiv"spanSOP合计:/spanspan${totalNum}/spanspan套/span/div 于是在我们删除这个条数据后,...
2024-11-14 前端开发问题
156

layui 单选框、复选框、下拉菜单不显示问题如何解决?
1. 如果是ajax嵌套了 页面, 请确保 只有最外层的页面引入了layui.css 和 layui.js ,内层页面 切记不要再次引入 2. 具体代码如下 layui.use(['form', 'upload'], function(){ var form = layui.form; form.render(); // 加入这一句});...
2024-11-09 前端开发问题
313

layui laydate日期时间范围,时间默认设定为23:59:59
在Layui中,如果你想设置日期时间选择器(datetime)的默认结束时间为当天的23:59:59,你可以使用如下代码: laydate.render({ elem: '#test10' ,type: 'datetime' ,range: true ,max: '{:date("Y-m-d 23:59:59")}' ,ready: function(date){ $(".layui-laydat...
2024-10-24 前端开发问题
279

layui要如何改变时间日历布局大小?
问题描述 我想改变layui时间日历布局大小,这个要怎么操作呢? 解决办法 可以用css样式对时间日历进行重新布局,具体代码如下: !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...
2024-10-24 前端开发问题
271