0

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

Stefano
  • 3
  • 3
  • 1
    It would help if you provided some actual details. But the first thing I would check is the user-agent in Chrome and in the embedded webview. – Jason Aug 11 '22 at 14:41
  • The UserAgent of the app is: 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 – Stefano Aug 12 '22 at 07:12
  • The useragent is different from the web version in mobile mode (if that's the comparison you meant) But even if it were I find nothing on how to change it in maui – Stefano Aug 12 '22 at 14:04
  • I assume your website uses the UserAgent - does it properly respond to the one supplied by the in-app browser? – Jason Aug 12 '22 at 14:08
  • Yes, I just did a test and at the change of user agent (putting one for mobile) the website behaves correctly. – Stefano Aug 17 '22 at 12:01
  • How is possible set UserAgent in webview on MAUI? – Stefano Aug 18 '22 at 09:27

1 Answers1

0

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

zmihaylov
  • 16
  • 2