web-dev-qa-db-ja.com

Webkit（または電子）でピンチズームを無効にする

電子 アプリでピンチズームを無効にする方法はありますか？

ここで説明されているように、通常のjavascriptメソッドを使用してWebビュー内から動作させることはできません： https://stackoverflow.com/a/23510108/665261

_--disable-pinch_フラグは electronではサポートされていない のようです。

以下を使用してさまざまな方法を試しました。

  1. event.preventDefault() on javascript _touchmove/mousemove_イベント
  2. HTMLの_meta viewport_タグ
  3. CSSの_-webkit-text-size-adjust_
  4. electronのフラグ/構成

一般的なウェブキット、または特に 電子 のいずれかの方法はありますか？

javascripthtmlcsswebkitelectron
37
Billy Moon

更新2：

使用する webFrame.setZoomLevelLimits （v0.31.1 +）inrender process（ メインプロセスとレンダラープロセスの違い ）。 Macのスマートズームはdocument.addEventListenerで引き続き機能するためです。

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

UPDATE：

ピンチズームのdeltaYプロパティにはfloat値がありますが、通常のスクロールイベントはint値を返します。解決策はctrlキーで問題ありません。

デモ2.

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

Chromium monitorEvents(document)を使用して、このイベントmousewheelの原因であることがわかりました。 mousewheelがピンチズームでトリガーされる理由はわかりません。次のステップでは、通常のスクロールとピンチズームの違いを見つけます。

ピンチズームには_e.ctrlKey = true_属性があり、通常のスクロールイベントには_e.ctrlKey = false_があります。ただし、ctrlキーを押しながらページをスクロールすると、_e.ctrlKey_はtrueと等しくなります。

より良い解決策を見つけることができませんでした。 :(

デモ

_document.addEventListener('mousewheel', function(e) {
  if(e.ctrlKey) {
    e.preventDefault();
  }
});
_
24
artanik

デスクトップブラウザがピンチズームを防ぐことは非常に難しいようです。

ここにいくつかのアイデアがあります！

1） hammer.js などのジェスチャJavaScriptを使用して、ピンチイベントを検出し、e.preventDefaultを使用してそれを防止しようとします。

OR

2）cssで「％」を使用してすべてを設計するか、「vm」などの新しいユニットを使用します（可能な場合）。この方法では、ページもズームされますが、コンテンツはどのズームレベルでも同じままです。

ではごきげんよう！

3
Sandeep

私はこの問題の簡単な解決策を無駄に長く探しました...しかし、後でタッチジェスチャーを許可しながらピンチズームを防ぐことができるfullpage.jsというプラグインを発見しました。 js/cssを削除するプロセスを通じて、非常に簡単なソリューションを発見しました。

touch-action: none;

これをページ全体の要素に追加すると、ピンチズームは正常に防止されましたが、ピンチでfabricjsオブジェクトをスケーリングできました。やった！

1
J. Barca
var app = require('electron')
app.commandLine.appendSwitch('disable-pinch');

これらの2つのリンクを混在させることで解決策が見つかりました。

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

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

1
Carlos Oliveira

メタタグは機能しているはずです。 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">

追伸：携帯電話でのみズームを無効にします。

0
Kapil Garg

このための最も簡単な修正は、スクリプトタグ内のプロジェクトの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>

これは、デバイス間で問題なく機能します。ビューポートメタタグのアプローチはデスクトップではうまく機能せず、モバイルデバイスの問題を修正するだけです。

0
Krishna Modi

使用できない理由があります：

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

それをヘッダーに入れると、デバイスがズームしなくなります。

0
James.carney91