ios 中的 WebView 以桌面模式打开

Question

我使用 Xamarin WebView 打开一个网站，网站使用的是响应式设计。

在 Android 上，网站填满了页面并正常工作 Android Picture 。

我在 IOS 中遇到的问题显示为在桌面而非移动模式下打开 IOS Picture,

经过更多搜索后，我发现 WKWebView 不像 UIWebView 那样使用 ScaleToFitPage 我尝试这段代码但没有改变任何东西 WKWebView didn't equivalent for UIWebView's scalesPageToFit

任何人都可以帮助我解决这个问题，从那一周开始我就陷入了这个问题，直到现在我都没有找到解决方案。

[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);
    }
}

Answer 1

你可以试试在constructor方法中写代码看看是否可行

例如：

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());
    }

}

Answer 2

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);
    }

}

终于我找到了解决方案，非常感谢@Junior Jiang - MSFT 帮助我，我用我以前写的代码再次尝试你的想法并且工作得很好，非常感谢。

ios 中的 WebView 以桌面模式打开

WebView in ios open as desktop mode

xamarin.ios

ios

xamarin

xamarin.forms