Flutter / webview_flutter too big to fit screen

[bi-samson]

Problem: Webpage loaded into webview is too big to fit mobile phone screen. I imagine I will need to load the mobile version of the page but I don't know how.

Some sites becomes too big, some sites the layout breaks and sites that are responsive are completely fine.

Tried adding userAgent: "random",

in WebView but didn't work.

webview_flutter: ^0.3.21 dependencies added to pubspec.yaml and added this to the end of info.plist

<key>io.flutter.embedded_views_preview</key>
    <string>YES</string>

Here is code within webview_container.dart

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

class WebViewContainer extends StatefulWidget {
  final url;
  WebViewContainer(this.url);
  @override
  createState() => _WebViewContainerState(this.url);
}

class _WebViewContainerState extends State<WebViewContainer> {
  var _url;
  final _key = UniqueKey();
  _WebViewContainerState(this._url);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Column(
          children: [
            Expanded(
                child: WebView(
                    key: _key,
                    javascriptMode: JavascriptMode.unrestricted,
                    userAgent: "random",
                    initialUrl: _url))

          ],
        ));
  }
}

[ktakayama]

Default user agent for WebView class on android (Emulator?) like Mozilla/5.0 (Linux; Android 8.1.0; Android SDK built for x86 Build/OSM 1180201026 ; wv) AppleWebkit/537.36 (KHTML, 11ke Gecko) Version/4.0 Chrome/61.0.3163.98 Mobile Safari/537.36. But some web pages (include BI, GIZ) could not display correct layout.

It works as I expected when the following changes.

- Mozilla/5.0 (Linux; Android 8.1.0; Android SDK built for x86 Build/OSM 1180201026 ; wv) AppleWebkit/537.36 (KHTML, 11ke Gecko) Version/4.0 Chrome/61.0.3163.98 Mobile Safari/537.36
+ Mozilla/5.0 (Linux; Android 8.1.0; XXXXXXX SDK built for x86 Build/OSM 1180201026 ; wv) AppleWebkit/537.36 (KHTML, 11ke Gecko) Version/4.0 Chrome/61.0.3163.98 Mobile Safari/537.36

[bi-samson]

Thank you Thank you! So I add this line of code somewhere?

I tried adding this in webview and it didn't work. userAgent: "random",

[ktakayama]

You can try it.

diff --git a/lib/webview_container.dart b/lib/webview_container.dart
index bc03a77..f8d6287 100644
--- a/lib/webview_container.dart
+++ b/lib/webview_container.dart
@@ -22,7 +22,7 @@ class _WebViewContainerState extends State<WebViewContainer> {
                 child: WebView(
                     key: _key,
                     javascriptMode: JavascriptMode.unrestricted,
-                    userAgent: "random",
+                    userAgent: "Mozilla/5.0 (Linux; Android 8.1.0; XXXXXXX SDK built for x86 Build/OSM 1180201026 ; wv) AppleWebkit/537.36 (KHTML
, 11ke Gecko) Version/4.0 Chrome/61.0.3163.98 Mobile Safari/537.36",
                     initialUrl: _url))

           ],

I think it would be better to fix that the parser for UserAgent on the server side.

However, this behavior occurs only on the emulator and not on the actual devices, so I think it can be ignored.

[bi-samson]

Thank you thank you! I had only tried it on the emulator and never tried on an actual device yet. Thank you!