MAUI.NET modifies the layout of the website inside the webview

Question

I am recently approaching the world of mobile app development and I have recently been practicing with MAUI.NET.

My goal is to put a website (which is already responsive) inside a MAUI WebView and distribute the app for Android and IOS.

This is my test MainPage.xaml:

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="POCMobileApp.MainPage">
    <WebView x:Name="browser" Source="https://www.google.it"></WebView> //google link is only for test
</ContentPage>

The problem is the following: The website if I open it from android google chrome is perfectly visible and all the controls on the site are in the right place. But when I open the MAUI app in the webview all the controls are all out of place. Is there any way to avoid this problem?

[EDIT] This is the printscreen of the mobile version of the browser: pic mobile version

While this is the version from the android emulator: pic emulator

Answer 1

Created custom renderer for android by inheriting now the deprecated WebViewRenderer.

namespace MauiApp.Platforms.Android.Renderers;
public class UserAgentWebViewRenderer : WebViewRenderer
{
    public UserAgentWebViewRenderer(Context context) : base(context)
    { }

    protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
    {
        base.OnElementChanged(e);

        if (e.NewElement != null)
        {
            Control.SetWebViewClient(GetWebViewClient());
            Control.Settings.UserAgentString = "Mozilla/5.0 (Linux; Android 12; sdk_gphone64_x86_64 Build/SE1A.211212.001.B1;wv) AppleWebKit/537.36 (KHTML, like Gecko) Versione/4.0 Chrome/91.0.4472.114 Mobile Safari/537.36";
        }
    }
}

Then registered it in the MauiProgram.cs

.ConfigureMauiHandlers((handlers) =>
{
#if ANDROID
    handlers.AddCompatibilityRenderer(typeof(WebView), typeof(Platforms.Android.Renderers.UserAgentWebViewRenderer));
#endif
})

Used https://github.com/xamarin/Xamarin.Forms/issues/8432 for reference