禁用webkit(或电子)中的缩放缩放

时间:2015-04-28 20:35:32

标签: javascript html css webkit electron

有没有办法在electron应用中停用缩放缩放?

我无法使用常规的javascript方法在网络视图中工作,如下所述:https://stackoverflow.com/a/23510108/665261

--disable-pinch标志似乎是not supported by electron

我使用以下方法尝试了各种方法:

    关于javascript event.preventDefault()活动的
  1. touchmove/mousemove HTML中的
  2. meta viewport个标签
  3. CSS中的
  4. -webkit-text-size-adjust
  5. flags / config for electron
  6. 一般来说,webkit是否有任何方法,或者特别是electron

9 个答案:

答案 0 :(得分:24)

更新2:

渲染过程webFrame.setZoomLevelLimits)中使用Differences Between Main Process and Renderer Process(v0.31.1 +)。因为mac上的智能缩放仍然可以使用document.addEventListener。

示例Operations to perform: Synchronize unmigrated apps: staticfiles, messages, registration Apply all migrations: sessions, admin, auth, contenttypes Synchronizing apps without migrations: Creating tables... Creating table registration_registrationprofile Running deferred SQL... Traceback (most recent call last): File "./manage.py", line 10, in <module> execute_from_command_line(sys.argv) File "/Users/tcosta/Virtualenvs/django_project/lib/python2.7/site-packages/django/core/management/__init__.py", line 338, in execute_from_command_line utility.execute() File "/Users/tcosta/Virtualenvs/django_project/lib/python2.7/site-packages/django/core/management/__init__.py", line 330, in execute self.fetch_command(subcommand).run_from_argv(self.argv) File "/Users/tcosta/Virtualenvs/django_project/lib/python2.7/site-packages/django/core/management/base.py", line 390, in run_from_argv self.execute(*args, **cmd_options) File "/Users/tcosta/Virtualenvs/django_project/lib/python2.7/site-packages/django/core/management/base.py", line 441, in execute output = self.handle(*args, **options) File "/Users/tcosta/Virtualenvs/django_project/lib/python2.7/site-packages/django/core/management/commands/migrate.py", line 179, in handle created_models = self.sync_apps(connection, executor.loader.unmigrated_apps) File "/Users/tcosta/Virtualenvs/django_project/lib/python2.7/site-packages/django/core/management/commands/migrate.py", line 317, in sync_apps cursor.execute(statement) File "/Users/tcosta/Virtualenvs/django_project/lib/python2.7/site-packages/django/db/backends/utils.py", line 79, in execute return super(CursorDebugWrapper, self).execute(sql, params) File "/Users/tcosta/Virtualenvs/django_project/lib/python2.7/site-packages/django/db/backends/utils.py", line 64, in execute return self.cursor.execute(sql, params) File "/Users/tcosta/Virtualenvs/django_project/lib/python2.7/site-packages/django/db/utils.py", line 97, in __exit__ six.reraise(dj_exc_type, dj_exc_value, traceback) File "/Users/tcosta/Virtualenvs/django_project/lib/python2.7/site-packages/django/db/backends/utils.py", line 62, in execute return self.cursor.execute(sql) django.db.utils.ProgrammingError: relation "auth_user" does not exist```

<强>更新

用于缩放缩放的

require('electron').webFrame.setZoomLevelLimits(1, 1)属性具有deltaY值,但正常滚动事件返回float值。现在解决方案使用ctrl键没有问题。

<强> Demo 2

int

使用Chromium document.addEventListener('mousewheel', function(e) { if(e.deltaY % 1 !== 0) { e.preventDefault(); } }); 我发现这个事件负责monitorEvents(document)。我不知道为什么mousewheel用缩放缩放触发。 下一步,找出正常滚动和缩放缩放之间的区别。

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

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

<强> Demo

true

答案 1 :(得分:3)

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

虽然这里有一些想法!

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

OR

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

一切顺利!

答案 2 :(得分:2)

来自GitHub的答案:

“如果您正在寻找一种方法来防止从进程缩放,则可以使用:”

diff --git a/vendor/symfony/symfony/src/Symfony/Component/Form/Form.php b/vendor/symfony/symfony/src/Symfony/Component/Form/Form.php
index 67fd234f..27ed9e81 100644
--- a/www/vendor/symfony/symfony/src/Symfony/Component/Form/Form.php
+++ b/www/vendor/symfony/symfony/src/Symfony/Component/Form/Form.php
@@ -553,6 +553,10 @@ class Form implements \IteratorAggregate, FormInterface
                 $submittedData = $event->getData();
             }

+            // HTTP PATCH fix for ChoiceType
+            // https://github.com/symfony/symfony/issues/17799#issuecomment-184473725
+            $clearMissing = $this->getConfig()->getOption('expanded', false) ?: $clearMissing;
+
             // Check whether the form is compound.
             // This check is preferable over checking the number of children,
             // since forms without children may also be compound.

const webContents = mainWindow.webContents; webContents.on('did-finish-load', () => { webContents.setZoomFactor(1); webContents.setVisualZoomLevelLimits(1, 1); webContents.setLayoutZoomLevelLimits(0, 0); }); 在您有mainWindow的地方是变量,例如:

new BrowserWindow

答案 3 :(得分:1)

我搜索了这么长时间并且很难找到这个问题的简单解决方案但没有用...但后来我发现了一个名为fullpage.js的插件,它能够在仍然允许触摸手势的同时防止捏缩放。通过消除js / css的过程,我发现了一个非常简单的解决方案:

touch-action: none;

将此添加到我的整页元素成功阻止了缩放缩放,但允许我使用捏缩缩缩fabricjs对象。万岁!

答案 4 :(得分:1)

#put it somewhere 
request.session['query'] = my_query 
#then you can access it from the other view in views.email_subscription

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

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

2-{{​​3}}

答案 5 :(得分:0)

有没有理由不能使用:

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

将它放在标题中,它可以防止设备缩放。

答案 6 :(得分: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">

P.S。 :它将仅禁用手机缩放。

答案 7 :(得分: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>

这可以在各种设备上完美运行。 视口元标记方法在桌面上无法正常工作,只能修复移动设备上的问题。

答案 8 :(得分:0)

我必须设置{ passive: false }使其起作用。不要问我为什么。

window.addEventListener('wheel', (e) => {
  if(e.ctrlKey) e.preventDefault();
}, { passive: false });