Flutter / webview_flutter too big to fit screen
1,395
I've tried a minimal repro with the url "https://www.businessinsider.jp/" and the latest version of webview_flutter, this is the output:
Minimal repro:
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,
),
);
}
}
It seems that the issue doesn't occur in the latest version.
Author by
Samson
A curious soul building his very first app at aged 40.
Updated on November 21, 2022Comments
-
Samson over 1 year
I am running flutter 1.17.1, using 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>
Problem: Webpage loaded into webview is too big to fit mobile phone screen. screenshot
Here is the code with the 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)) ], )); } }
Link to the full app: https://github.com/bi-samson/mreader
-
Anirudh Bagri almost 4 yearsmake sure you load the mobile version of the website if available.
-
Samson almost 4 yearsMay I ask how I can get webview to fetch mobile version of the site when available? Something like this? <meta name="viewport" content="width=device-width, initial-scale=1"> Or is there a way to limit the width so it will automatically show me the mobile version of the site?
-
Lorenzo Pichilli almost 4 yearsI tried
initialUrl: "https://www.businessinsider.jp/"
with my plugin flutter_inappwebview (which is a Flutter plugin that allows you to add inline WebViews or open an in-app browser window and has a lot of events, methods, and options to control WebViews) using the base example available in theREADME.md
of the Github repository and it fits correctly the screen.
-