web-dev-qa-db-ja.com

キオスクで使用するためのピンチズームを無効にするChrome

キオスクモードでChromeを使用しており、誤ってユーザーが最近追加したピンチズームサポートでアプリケーションをズームさせています。壊れた状態の55インチタッチスクリーン）。

動作するのは、2ポイント以上のタッチイベントのイベント伝播を停止することだけです。その場合の問題は、その場合、マルチタッチアプリを実行できないことであり、高速に動作すると、ブラウザはjavascriptの前に反応します。私たちのテストでは、これはユーザーによる偶発的な事故でまだ発生しています。

Metaタグを実行しましたが、機能しません。正直なところ、chromeズームをすべて無効にしたいのですが、それを行う方法が見つかりません。

ブラウザのズームを停止するにはどうすればよいですか？

google-chromezoomkioskpinch
34
Dennis Smolek

同様の問題がありました。ブラウザーのズームとして現れますが、JavaScriptはタッチイベントを受信しません（または、ズームが開始する前に1ポイントだけになることもあります）。

これらの可能性のある（ただし長期的ではない可能性のある）ソリューションが見つかりました。

1。キオスクモードを使用する場合、ピンチ/スワイプ機能を無効にします

これらのコマンドライン設定がChromeに残っている場合、次のことができます。

chrome.exe --kiosk --incognito --disable-pinch --overscroll-history-navigation=0
  • -disable-pinch-ピンチズーム機能を無効にします
  • -overscroll-history-navigation = 0-スワイプしてナビゲートする機能を無効にします

2。 Chrome flags chrome：// flags /＃enable-pinchを使用してピンチズームを無効にします

ブラウザでURL chrome：// flags /＃enable-pinchに移動し、機能を無効にします。

ピンチズーム機能は現在実験段階ですが、デフォルトでオンになっているため、将来のバージョンでは強制的に有効になる可能性があります。キオスクモード（およびハードウェア/ソフトウェアの制御）を使用している場合は、インストール時にこの設定を切り替えて、Chrome更新が進行するのを防ぐことができます。

Chromium Issue 304869 にこの設定を削除するためのロードマップチケットが既にあります。

Javascriptがそれを防ぐことができる前にブラウザが反応するという事実は間違いなくバグであり、 Chromiumバグトラッカー で記録されています。機能が永続的に有効になるか、指を交差させる前に修正されて、設定として残されることを願っています。

3。アプリに一致する要素とイベントのすべてのタッチ、ホワイトリストを無効にします

実施したすべてのテストで、ドキュメントにpreventDefault（）を追加すると、Chromeでのズーム（および他のすべてのスワイプ/タッチイベント）が停止します。

document.addEventListener('touchstart', function(event){
    event.preventDefault();
}, {passive: false});

タッチベースの機能をDOMの上位にアタッチすると、ドキュメントのpreventDefault（）呼び出しにバブルする前にアクティブになります。 Chrome=では、eventListenerOptionsパラメータを含めることも重要です。Chrome 51 a ドキュメントレベルのイベントリスナーは{passive: true}デフォルトでは 。

これにより、スワイプなどの通常のブラウザ機能が無効になりますが、おそらく自分で実装する必要があります。フルスクリーンでスクロールできないキオスクアプリの場合、これらの機能は重要ではないかもしれません。

70
JimmyG

このページを偶然見つけた人は、Chromeで「ズームしてピンチ」を無効にする）のフラグが次のようになっていることに気付きます。

50を超えるGoogle Chrome/Chromium/Canaryバージョン：

chrome://flags/#touch-events

Google Chrome/Chromium/Canaryバージョンが50未満または古いバージョン：

chrome://flags/#enable-pinch。

9
James Lott 
html {
  touch-action:none;
}

これにより、すべてのパンおよびズームジェスチャーのブラウザー処理が無効になります。ジェスチャは、javascriptコードによる処理に引き続き利用できます。

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

4
phil

私は同じ問題を扱っています。私は次のアプローチでそれを合理的にうまく処理できると思います

  • html要素のcssピクセル幅を決定します：document.documentElement.clientWidth
  • この測定値をキオスク画面の既知のピクセル幅と比較します
  • html要素の幅が、画面よりもcssピクセルの場合、物理ピクセルの場合、それはスケーリングされていることを意味します
  • html要素が拡大縮小されている場合は、body要素にズームを適用して補正します。式は `body.style.zoom = htmlElementClientWidth/screenPhysicalPixelWidthです

このテクニックには、現在のウィンドウのサイズに合わせてUIが自動的にスケーリングされるという有益な副作用があります。これは、ターゲット画面よりも小さい画面で開発している場合に開発に役立ちます。

画面ピクセルとcssピクセルの詳細、および quirksmode.org で使用可能なスペースを埋めるためにhtml要素がどのように展開するかについての説明。

3
morgancodes

現在Chrome（54）で動作する別のソリューションは、_'touchstart'_イベントのイベントリスナーを追加し、targetTouchesの長さに基づいてpreventDefault()を呼び出すか、イベントのtouches。

このソリューションは、ピンチ（2本指のジェスチャー）を防ぎますが、それでもイベントへの応答方法に柔軟性を提供します。タッチイベントを完全に無効にする必要がないため、これは素晴らしいソリューションです（_chrome://flags/#enable-pinch_が存在しないため、chromeフラグを使用してピンチを無効にする場合に必要です）。

_window.addEventListener('touchstart', function(e) {
  if (e.targetTouches.length === 2) {
    e.preventDefault();
  }
}, false);_
Some text that you can't pinch zoom on Chrome (tested in 54)
2
wgardiner

バージョン51.0.2704.84 mでは、chrome：// flags /＃touch-eventsは、ピンチ機能だけでなく、すべてのタッチイベントを無効にします。参考までに。 Googleが将来のリリースでこの機能を返すことを願っています。

0
wendecat