How to display web pages responsively in a Flutter Android app?

Question

I would like to get web pages to display responsively in my Flutter apps, and am unable to do so. They display as if the screen/viewport was much wider. For example, a page that looks like this in Android Chrome:

ends up looking like this in my app (regardless of the package I use):

I have experimented with both the webview_flutter and flutter_webview_plugin packages, including experimenting with several flutter_webview_plugin functions, turning them on and off:

Future<Null> launch(String url, {
   bool withJavascript: true,
   bool enableAppScheme: true,
   bool withZoom: false,
   bool scrollBar: true,
   bool displayZoomControls: false,
   bool useWideViewPort: false,
});

I'm starting to think the solution isn't in Flutter or its packages, but maybe something like manipulating the Android manifest file (hence the android and android-webview tags)?

did you found any soultion.? facing the same issue.

krishnakumarcn
– krishnakumarcn

2020-12-18 06:05:44 +00:00
Commented Dec 18, 2020 at 6:05 — krishnakumarcn
– krishnakumarcn, Commented Dec 18, 2020 at 6:05

RegularGuy · Accepted Answer · 2019-10-30 22:14:50Z

1

try changing the userAgent of https://pub.dev/packages/flutter_webview_plugin for a chrome one , you can find them here

Future<Null> launch(String url, {
   bool withJavascript: true,
   String userAgent : 'Mozilla/5.0 (Linux; <Android Version>; <Build Tag etc.>) AppleWebKit/<WebKit Rev> (KHTML, like Gecko) Chrome/<Chrome Rev> Mobile Safari/<WebKit Rev>'
});

answered Oct 30, 2019 at 22:14

RegularGuy

3,7261 gold badge16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Al C Over a year ago

Thanks, @ValdaXD; I look forward to trying this. Keeping in mind my newbie-ness, will I need some sort of conditional code if I someday compile for a tablet or iOS device, or will the one userAgent string work well everywhere?

RegularGuy Over a year ago

Yeah, the User Agent string is accepted by the webpage and the webpage doesn't even try to tell if it is right , try checking the articles about this , like howtogeek.com/114937/htg-explains-whats-a-browser-user-agent , it should work on Ios, android, an obviously web browsers

Al C Over a year ago

Sadly for me, the page displayed the same way. But +1 for the clarity and completeness of your response. I appreciate the link(s).

Collectives™ on Stack Overflow

How to display web pages responsively in a Flutter Android app?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related