WebView in ios open as desktop mode

Question

I use Xamarin WebView to open a site, site is using responsive design.

On Android the site fills the page and work correctly Android Picture .

My Problem in IOS it appears as it open in desktop not in mobile mode IOS Picture,

after more searched i found WKWebView not use ScaleToFitPage Like UIWebView I try this code but not change anything WKWebView didn't equivalent for UIWebView's scalesPageToFit

can anyone help me about that i stuck in that problem from week i didn't find solution till now.

[assembly: ExportRenderer(typeof(CustomWebView), typeof(CustomWebViewRenderer))]
namespace TanfezClient.iOS.Renderers
{
class CustomWebViewRenderer : WkWebViewRenderer
{
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
//this.ScalesLargeContentImage = true;
//this.ShowsLargeContentViewer = true;
//this.SizeToFit();

        string jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); 
       meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
        WKUserScript wkUScript = new WKUserScript((NSString)jScript, WKUserScriptInjectionTime.AtDocumentEnd, true);
        WKUserContentController wkUController = new WKUserContentController();
        wkUController.AddUserScript(wkUScript);
        WKWebViewConfiguration wkWebConfig = new WKWebViewConfiguration();
        wkWebConfig.UserContentController = wkUController;
        WKWebView webView = new WKWebView(Frame, wkWebConfig);
    }
}

score 0 · Answer 1 · answered Aug 17 '20 at 06:31

You can have a try to write code in constructor method to check whether it can work.

For example :

public class HybridWebViewRenderer : WkWebViewRenderer, IWKScriptMessageHandler
{
    const string JavaScriptFunction = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
    WKUserContentController userController;
  
    public HybridWebViewRenderer() : this(new WKWebViewConfiguration())
    {

    }

    public HybridWebViewRenderer(WKWebViewConfiguration config) : base(config)
    {
        userController = config.UserContentController;
        var script = new WKUserScript(new NSString(JavaScriptFunction), WKUserScriptInjectionTime.AtDocumentEnd, true);
        userController.AddUserScript(script);
        userController.AddScriptMessageHandler(this, "invokeAction");
    }

    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
        base.OnElementChanged(e);

        if (e.OldElement != null)
        {
            userController.RemoveAllUserScripts();
            userController.RemoveScriptMessageHandler("invokeAction");
            HybridWebView hybridWebView = e.OldElement as HybridWebView;
            hybridWebView.Cleanup();

        }

        if (e.NewElement != null)
        {
            string filename = Path.Combine(NSBundle.MainBundle.BundlePath, $"Content/{((HybridWebView)Element).Uri}");
            LoadRequest(new NSUrlRequest(new NSUrl(filename, false)));
        }
     
    }

    public void DidReceiveScriptMessage(WKUserContentController userContentController, WKScriptMessage message)
    {
        ((HybridWebView)Element).InvokeAction(message.Body.ToString());
    }

}

@Nehalosama That's the custom webview from xamarin forms, you can refer to [this official sample](https://learn.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/customrenderers-hybridwebview/) ,the sample code based on this. — Junior Jiang, Aug 17 '20 at 07:42
I read a sample and try to put code in constructor, But unfortunately not solve the problem. I didn't find any solution till now, and the customer got angry and I don't know what i should do to show payment site of Ios as same as Android. — Nehal osama, Aug 18 '20 at 21:07
@Nehalosama Okey, if find other good ideas will update here later. — Junior Jiang, Aug 19 '20 at 05:57

score 0 · Accepted Answer · answered Aug 19 '20 at 16:33

class CustomWebViewRenderer : WkWebViewRenderer
{
    const string JavaScriptFunction = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
    WKUserContentController userController;

    public CustomWebViewRenderer() : this(new WKWebViewConfiguration())
    {
    }

    public CustomWebViewRenderer(WKWebViewConfiguration config) : base(config)
    {

        userController = config.UserContentController;
        var script = new WKUserScript(new NSString(JavaScriptFunction), WKUserScriptInjectionTime.AtDocumentEnd, false);
        userController.AddUserScript(script);
        config.UserContentController = userController;
        WKWebView webView = new WKWebView(Frame, config);
    }

}

Finally i find Solution, thanks very much @Junior Jiang - MSFT For helping me i try again your idea with code i write before and work well thanks alot.

WebView in ios open as desktop mode

2 Answers2

Linked