如何使用离子电容器启用捏缩放？

Question

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

Answer 1

我从GitHub 问题中获得一些线索后找到了答案，他们修改了 CapacitorBridgeActivity类代码以更改 WebView 初始化，但我真的不想修改可能自动生成的代码或属于电容器核心的一部分，所以我找到了一种用插件来做到这一点的方法。

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

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。