Flutter / webview_flutter太大无法适应屏幕

Question

我正在运行Flutter 1.17.1版本，使用webview_flutter: ^0.3.21。将依赖项添加到pubspec.yaml文件，并将其添加到info.plist文件的末尾。

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

问题：在Webview中加载的网页太大，无法适应手机屏幕。 截图 以下是带有Webview的代码：

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

          ],
        ));
  }
}

完整应用程序链接: https://github.com/bi-samson/mreader

- Samson

---

请确保在可用的情况下加载网站的移动版本。 - Anirudh Bagri

我能问一下如何让 webview 在移动站点可用时获取移动版本吗？类似这样的东西？<meta name="viewport" content="width=device-width, initial-scale=1"> 或者有没有一种方式限制宽度，以便自动显示移动站点的版本？ - Samson

我使用我的插件flutter_inappwebview（这是一个Flutter插件，允许您添加内联WebViews或打开应用内浏览器窗口，并具有许多事件、方法和选项来控制WebViews）在Github存储库的README.md中提供的基本示例中尝试了initialUrl: "https://www.businessinsider.jp/"，并且它正确地适合屏幕。 - Lorenzo Pichilli

Answer 1

我已经尝试使用网址"https://www.businessinsider.jp/"和webview_flutter的最新版本进行了最小限度的重现，这是输出结果：

最小复现：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final Completer<WebViewController> _controller =
      Completer<WebViewController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: WebView(
        initialUrl: "https://www.businessinsider.jp/",
        onWebViewCreated: (WebViewController webViewController) {
          _controller.complete(webViewController);
        },
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

似乎问题在最新版本中已经不存在。

- MαπμQμαπkγVπ.0

Answer 2

使用InAppWebView代替WebView。 这将在您的包的pubspec.yaml中添加一行类似于此行：

dependencies:
  flutter_inappwebview: ^5.3.2

这里有一个代码示例：

return InAppWebView(
      initialOptions: InAppWebViewGroupOptions(
          android: AndroidInAppWebViewOptions(
              useHybridComposition: true,
              textZoom: 100 * 2 // it makes 2 times bigger
          )
      ),
      onWebViewCreated: (InAppWebViewController controller) {
        webViewController = controller;
        controller.loadData(data: widget.html, mimeType: "text/html");
      },
    );

如果你想让它更小，你只需要按照以下方式进行划分：

textZoom: 100 / 2 // it makes 2 times smaller

- Fakhriddin Abdullaev