如何使用 Ionic Capacitor 启用捏缩放？答案

【问题标题】：How can I enable pinch zooming with Ionic Capacitor?如何使用 Ionic Capacitor 启用捏缩放？
【发布时间】：2021-10-11 12:20:27
【问题描述】：

我正在使用 Capacitor 构建一个应用程序，以将我的网站作为应用程序的主要部分嵌入其中，其中有些部分我希望能够进行缩放（例如照片库）。我已经 found answers 关于 Android WebViews 和使用 maximum-scale 设置的 HTML meta 标签，就像这样，但是在更改元标签后，webview 仍然不支持捏缩放。有没有办法覆盖电容器设置以允许缩放？

【问题讨论】：

标签： javascript java android html capacitor

【解决方案1】：

我从GitHub issue 获得一些线索后找到了答案的电容器芯，所以我找到了一种使用插件的方法。

编写以下ZoomPlugin 类允许我通过bridge 属性访问WebView 并修改缩放设置：

package com.example.app;

import com.getcapacitor.Plugin;
import com.getcapacitor.annotation.CapacitorPlugin;

@CapacitorPlugin(name = "Zoom")
public class ZoomPlugin extends Plugin {
    @Override
    public void load() {
        this.bridge.getWebView().getSettings().setBuiltInZoomControls(true);
        // disables zoom in/zoom out buttons in the webview, to only allow pinch to zoom
        this.bridge.getWebView().getSettings().setDisplayZoomControls(false);
    }
}

写好插件后，在MainActivity类中注册：

package com.example.app;

import android.os.Bundle;
import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        registerPlugin(ZoomPlugin.class);
    }
}

现在，只要您的meta 标签设置正确，捏到缩放应该可以工作，如其他答案中所述：

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

其中的重要部分是maximum-scale=2.5，它将缩放限制设置为 2.5 倍。您可以通过将maximum-scale 设置为与initial-scale 相同来禁用页面缩放。

【讨论】：

是否可以使用上面的插件参考接受cookie或传递WebView的标头？