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

Posted 2023-05-07

【中文标题】如何使用 Ionic Capacitor 启用捏缩放？

【英文标题】：How can I enable pinch zooming with Ionic Capacitor?

【发布时间】：2021-10-11 12:20:27

【问题描述】：

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

【参考方案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的标头？