我需要在我的应用程序中显示网站的桌面版本。对我来说,它显示了应用程序的移动版本:
代码:
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import './landing_page.dart';
class ComicsPage extends StatefulWidget {
@override
_ComicsPageState createState() => _ComicsPageState();
}
class _ComicsPageState extends State<ComicsPage> {
TextEditingController controller = TextEditingController();
FlutterWebviewPlugin flutterWebviewPlugin = FlutterWebviewPlugin();
var urlString = "https://avengers.marvelhq.com/comics";
launchUrl() {
setState(() {
urlString = controller.text;
flutterWebviewPlugin.reloadUrl(urlString);
});
}
@override
void initState() {
super.initState();
flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged wvs) {
print(wvs.type);
});
}
@override
Widget build(BuildContext context) {
String newUA= "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101
Firefox/40.1";
return WebviewScaffold(
appBar: AppBar(
actions: <Widget>[
IconButton(
icon: Icon(Icons.cancel,size: 45.0),
onPressed: () => Navigator.of(context).pushAndRemoveUntil(new
MaterialPageRoute(builder: (BuildContext context) => new LandingPage()),
(Route route) => route == null),
)
],
title: const Text('Marvel Comics'),
),
url: urlString,
withZoom: true,
withJavascript: true,
withLocalStorage: true,
scrollBar: true,
enableAppScheme: true,
userAgent: newUA,
clearCookies: false,
clearCache: false,
);
}
}
i need to view like this sample image
特别是对于这个网站:click here
我试图将用户代理更改为桌面版本(Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.1)。它不起作用..给我解决方案。
最佳答案
我知道这个迟到的答案,但也许有人会需要它
顺便说一句,我之前也面临过这个问题
在做了这个技巧之后它对我有用
只需在您的页面加载后尝试评估此代码 JavaScript
像这样
//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: "My Url",
withJavascript: true,
useWideViewPort: true,
displayZoomControls: false,
scrollBar: true,
withZoom: true,
);
}
链接网页浏览 插件 here
关于android - 如何在 Flutter 应用中添加桌面版网站?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52720983/