How to Enable Zoom Feature for BlazorWebView MAUI Hybrid on Android?

[thinhdo-developer]

Description

Hello,

I am working on a project using .NET MAUI with Blazor Hybrid. I want to enable the zoom feature (pinch-to-zoom and double-tap-to-zoom) for the BlazorWebView when running on an Android device.

Currently, the content in the BlazorWebView is not zoomable. I would like to know if there is a built-in way to enable this or if I need to implement it through custom renderers or platform-specific code.

Any guidance, sample code, or reference to documentation would be greatly appreciated.

Thank you!

[jfversluis]

Maybe these platform specifics will work? https://learn.microsoft.com/dotnet/maui/android/platform-specifics/webview-zoom-controls?view=net-maui-9.0

[diegompimenta]

@thinhdo-developer @jfversluis You can use like this:

Android:

PAGE SAMPLE
<BlazorWebView HostPage="wwwroot/index.html" x:Name="webView" BlazorWebViewInitialized="OnBlazorWebViewInitialized"> <BlazorWebView.RootComponents> <RootComponent x:Name="blazorWebView" Selector="#app" ComponentType="{x:Type components:MyComponent}"/> </BlazorWebView.RootComponents> </BlazorWebView>

CODE
private void OnBlazorWebViewInitialized(object sender, BlazorWebViewInitializedEventArgs e) { #if ANDROID e.WebView.Settings.DisplayZoomControls = false; e.WebView.Settings.BuiltInZoomControls = true; e.WebView.Settings.SetSupportZoom(true); #endif }

iOS:

Index.html
Change de viewport to enable
Sample:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes, viewport-fit=cover" />

I hope that help you! :)