android - ローカル html で webview のズームでピンチを使用すると歪む

Question

ローカルの html ファイルが開かれている webview があります。このローカル html ファイルは、Google Javascript API を使用して Google マップを開きます。私は webview.getsettings().setbuiltinzoomcontrols を true に設定しました。ピンチ ズームが発生していますが、Web ビューのスケールが歪んでいます。どうしてこうなったのか、わかる方いたら教えてください。よろしくお願いします アスタ・デブラ

Answer 1

webview.getsettings().setbuiltinzoomcontrols は、(画像を引き伸ばすのと同じように) webview 全体のスケーリングを有効にし、JavaScript コードと通信しません。

ネイティブの Google マップ アプリを実行する代わりに、Android Web ブラウザーで Google マップを開くと、同じことが起こることに気付くでしょう。

onTouchListener でピンチ ジェスチャをキャプチャし、JavaScript で webview.loadUrl("javascript: YOUR_ZOOM_IN_FUNCTION") で Map のズーム値を設定できます。

Answer 2

ほとんどの Android 2.x デバイスの WebView は、javascript で複数のタッチ イベントを生成せず、代わりにブラウザ コンテンツをズームします。したがって、「歪み」が発生します。

これらのデバイスをサポートするために、Web コンテナーを拡張して欠落しているイベントを生成することができます。これは、github にあるこの「Polyfill」で以前に行ったものです。

また、次のようにビューポート メタタグを設定して、HTML ヘッダーでユーザーのスケーリングが禁止されていることを確認してください。 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />