ios中的WebView打开为桌面模式Flutter

Question

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

在 Android 上，网站填满页面并正常工作Android Image

我在 IOS 中出现的问题是在桌面而不是移动模式下打开时出现IOS Image

我是 Flutter 的新手，但我在 Xamarin 中解决了这个问题 This the same Problem in xamarin

这是用于在flutter中通过dart语言打开Web View的代码

Widget build(BuildContext context) {
return Scaffold(
    appBar: AppBar(
      title: Text(_title),
      backgroundColor: dark_blue,
    ),
    body: WebView(
      initialUrl: _selectedUrl,
      javascriptMode: JavascriptMode.unrestricted,
      onWebViewCreated: (WebViewController webViewController) {
        _controller.complete(webViewController);
      },
      navigationDelegate: (NavigationRequest request) {
        if (request.url.contains('https://helper')) {
          CompletePaymentFun();
          return NavigationDecision.prevent;
        }
        return NavigationDecision.navigate;
      },
    ));}

这是我在 c# 中的解决方案我在 ios 中制作了一个自定义 Webview，但我不知道如何使用 dart 语言在颤振中解决它。

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

}

Answer 1

pubspec.yaml

flutter_webview_plugin: ^0.4.0

ma​​in.dart

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class WebViewContainer extends StatefulWidget {
  final url;

  WebViewContainer(this.url);

  @override
  createState() => _WebViewContainerState(this.url);
}

class _WebViewContainerState extends State<WebViewContainer> {
  var _url="https://www.amazon.in/?&_encoding=UTF8&tag=bappasaikh-21&linkCode=ur2&linkId=e3b009b026920c3cfdd6185fadfb7e67&camp=3638&creative=24630";
  final _key = UniqueKey();

  _WebViewContainerState(this._url);


//to load desktop mode
  String js = "document.querySelector('meta[name=\"viewport\"]').setAttribute('content', 'width=1024px, initial-scale=' + (document.documentElement.clientWidth / 1024))";


  @override
  Widget build(BuildContext context) {
    final flutterWebViewPlugin = new FlutterWebviewPlugin();

    flutterWebViewPlugin.onProgressChanged.listen((event) {
      debugPrint("Progress $event");

      //this will make show in desktop mode
      flutterWebViewPlugin.evalJavascript(js);

    });



    return WebviewScaffold(
      appBar: AppBar(
        title: Text("Desktop Mode"),
      ),
      url: _url,
      withJavascript: true,
      useWideViewPort: true,
      displayZoomControls: false,
      scrollBar: true,
      withZoom: true,
      userAgent: js,
    );
  }

}

Answer 2

我在使用 flutter_inappwebview 包时遇到了同样的问题。

通过将 InAppWebViewOptions 对象的 preferredContentMode 字段设置为 UserPreferredContentMode.MOBILE，我能够强制 InAppWebView 使用我的网站的移动版本：

InAppWebViewGroupOptions options = InAppWebViewGroupOptions(
    crossPlatform: InAppWebViewOptions(
      useShouldOverrideUrlLoading: true,
      mediaPlaybackRequiresUserGesture: false,
      preferredContentMode: UserPreferredContentMode.MOBILE, // ADD THIS
    ),
    android: AndroidInAppWebViewOptions(
      useHybridComposition: true,
      hardwareAcceleration: true,
    ),
    ios: IOSInAppWebViewOptions(
      allowsInlineMediaPlayback: true, 
    ),
  );

然后您可以将选项插入 InAppWebView 小部件，如下所示：

InAppWebView(
    initialUrlRequest: URLRequest(url: Uri.parse(model.url)),
    initialOptions: options,
....

);

Answer 3

我用这段代码解决了同样的问题。

WebView(
    key: _key,
    javascriptMode: JavascriptMode.unrestricted,
    initialUrl: "${routeArguments.url}",
    gestureNavigationEnabled: true,
    onWebViewCreated: (controller) {
      this.controller = controller;
    },
    onPageFinished: (url){
      controller.evaluateJavascript(
            "function toMobile(){"
            "var meta = document.createElement('meta'); "
            "meta.setAttribute('name', 'viewport');"
            " meta.setAttribute('content', 'width=device-width, initial-scale=1'); "
            "var head= document.getElementsByTagName('head')[0];"
            "head.appendChild(meta); "
            "}"
            "toMobile()"
      );
    },
  )