Android 的 BuiltInZoom 在混合应用程序中不起作用答案

【问题标题】：Android's BuiltInZoom doesn't work in hybrid appAndroid 的 BuiltInZoom 在混合应用程序中不起作用
【发布时间】：2020-09-13 11:05:16
【问题描述】：

我正在 Android 上开发一个在 WebView 上显示 HTML 的混合应用程序。我想通过捏合来缩放屏幕，但是当我在 JavaScript 端收到触摸事件时，BuiltInZoom 不起作用（无法放大/缩小）。它在 Pixel 4 (Android 10) 上出现，但在 Pixel 3 (Android 9) 上正常工作。

我已经尝试过的

如果我没有在 JavaScript 中获得触摸事件，我可以放大和缩小。
由于在 onScale 上调用了 pinch 事件，我可以获取当前 span 并在 onDraw 上应用。
但是，这是不可取的，因为它不反映 HTML“视口”的“最大比例”。我想根据“视口”控制最大放大倍率。

我得到如下触摸事件。

view.addEventListener('touchstart', (e) => {
  console.log('touchstart');
});
view.addEventListener('touchmove', (e) => {
  console.log('touchmove');
});

我将 BuiltInZoom 设置为在 Android 上启用。

webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setDisplayZoomControls(true);
webView.getSettings().setSupportZoom(true);

注意

它在 Pixel 4 (Android 10) 和 Galaxy Tab S4 (Android 9) 上出现，但它在 Pixel 3 (Android 9) 上正常工作。
我可以使用缩放控件进行缩放，但它已被弃用。
我可以用一根手指长按屏幕后进行缩放。
将一根手指放在没有触摸事件的元素上时，我可以进行缩放。
每当我操作捏合动作时都会调用 onScale。
WebViewClient.onScaleChanged 仅在可以缩放时调用。
我动态更改了 HTML“视口”的“最大比例”，因为允许缩放某些页面而不允许缩放其他页面。

【问题讨论】：

标签： javascript android html css

【解决方案1】：

我可以通过忽略 WebView.onTouchEvent 中的 ACTION_POINTER_DOWN 来进行缩放。但是突然放大了，很大程度上是因为没有位置。

@Override
public boolean onTouchEvent(MotionEvent ev) {

    if (ev.getActionMasked() == MotionEvent.ACTION_POINTER_DOWN) {
        return false;
    }

    super.onTouchEvent(ev);

    return true;
}

【讨论】：