WebView in ios open as desktop mode Flutter

Question

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

On Android the site fills the page and work correctly Android Image

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

I am a new in flutter but i solved this problem in Xamarin This the same Problem in xamarin

This is code Used to Open Web View by dart language in flutter

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

this is my solution in c# I made a custom Webview in ios but I don't know how to solve it in flutter using dart language.

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

}

try with this https://pub.dev/packages/flutter_inappwebview – Shubham Narkhede Dec 25 '20 at 02:59 — Shubham Narkhede, Dec 25 '20 at 02:59

score 3 · Answer 1 · answered Jan 12 '22 at 22:43

I solved same problem with this code.

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

score 0 · Answer 2 · answered Jun 27 '21 at 03:27

pubspec.yaml

flutter_webview_plugin: ^0.4.0

main.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,
    );
  }

}

score 0 · Answer 3 · answered Sep 22 '21 at 18:32

I ran into the same problem using the flutter_inappwebview package.

I was able to force the InAppWebView to use the mobile version of my website by setting the preferredContentMode field of the InAppWebViewOptions object to UserPreferredContentMode.MOBILE:

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

Then you can plug the options into the InAppWebView widget like so:

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

);

score 0 · Answer 4 · answered Aug 10 '22 at 10:06

    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.63 Safari/537.36";
class Web1 extends StatefulWidget {
  const Web1({Key? key}) : super(key: key);
  @override
  State<Web1> createState() => _Web1State();
}
class _Web1State extends State<Web1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: WebView(
        initialUrl: url,
        userAgent: userAgent,
      ),
    );
  }
}

WebView in ios open as desktop mode Flutter

4 Answers4