Flutter网页视图无法使网页适合屏幕

Question

我正在使用webview_flutter：^ 0.3.14 + 1。

Webview无法正确加载网页https://m.bilibili.com/video/av57346110.html。 The web page is oversized

但是如果使用chrome打开，则网页适合屏幕correctly。

而且我不理解Web浏览器和Flutter Webview之间的区别。

以下是要复制的最少代码：

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

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(),
        body: Container(
          child: WebView(
            initialUrl: "https://m.bilibili.com/video/av57346110.html",
            javascriptMode: JavascriptMode.unrestricted,
            navigationDelegate: (NavigationRequest request) {
              print("Loading... ${request.url}");
              if(request.url.startsWith("http")) {
                return NavigationDecision.navigate;
              } else {
                return NavigationDecision.prevent;
              }
            },
          ),
        ),
      ),
    );
  }
}

Answer 1

您有没有解决这个问题？我也遇到类似的问题，webview打开的页面比智能手机的屏幕大。

Screenshot

这是我的代码：

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,
                    initialUrl: _url))

          ],
        ));
  }
}