javascript - Webkit（またはelectron）でピンチズームを無効にする

Question

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

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

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

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

Webkit全般、または特に電子のいずれかの方法はありますか?

score 29 · Accepted Answer

更新 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();
  }
});

score 1 · Accepted Answer

使用できない理由は次のとおりです。

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

それをヘッダーに入れると、デバイスがズームするのを防ぎます。

score 0 · Accepted Answer

メタタグが機能するはずです。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 : 携帯電話でのみズームを無効にします。

9 に答える 9