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

Question

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

Answer 1

我从 GitHub issue 那里获得一些线索后找到了答案，他们修改了 Capacitor BridgeActivity class 代码以更改 WebView 初始化，但我真的不想这样做修改可能自动生成或属于电容器核心的代码，所以我找到了一种使用插件的方法。

写下面的ZoomPlugin class允许我通过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);
    }
}

写好插件后，在MainActivityclass中注册：

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 相同来禁用页面缩放。

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

How can I enable pinch zooming with Ionic Capacitor?

html

javascript

java

android

capacitor