[webview_flutter_android] feat: Expose setUseWideViewPort on Android (#106999) (flutter#9151)

Gustl22 · web-flow · commit 58d401608590 · 2025-05-16T18:13:06.000Z
The option to set whether the webview should use the wide viewport should be available. Also the default is changed to false, because this is the expected behavior on Android devices: https://developer.android.com/develop/ui/views/layout/webapps/targeting On iOS also the default behavior is to NOT use wide viewport, so this is aligned. > Note: When your page is rendered in a WebView, it doesn't use wide viewport mode by default. You can enable wide viewport mode with setUseWideViewPort(). This also partically solves flutter/flutter#106999, as then the correct height is returned from `document.documentElement.scrollHeight;` property. *If you had to change anything in the [flutter/tests] repo, include a link to the migration guide as per the [breaking change policy].*
diff --git a/packages/webview_flutter/webview_flutter_android/CHANGELOG.md b/packages/webview_flutter/webview_flutter_android/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 4.6.0
+
+* Adds support to set using wide view port. See `AndroidWebViewController.setUseWideViewPort`.
+* Changes default of `WebSettings.setUseWideViewPort` to `false` to align with native WebViews.
+
 ## 4.5.0
 
 * Adds support to set whether to draw the scrollbar. See
diff --git a/packages/webview_flutter/webview_flutter_android/example/lib/main.dart b/packages/webview_flutter/webview_flutter_android/example/lib/main.dart
@@ -139,6 +139,26 @@ const String kAlertTestPage = '''
 </html>  
 ''';
 
+const String kViewportMetaPage = '''
+  <!DOCTYPE html>
+  <html>
+  <head>
+      <title>Viewport meta example</title>
+  </head>
+  <meta name="viewport" content="width=1000, initial-scale=1" />
+  <style type="text/css">
+      body { background: transparent; margin: 0; padding: 0; }
+      #shape { background: red; width: 50vw; height: 50vw; }
+  </style>
+  <body>
+  <div>
+      <p>Viewport meta example</p>
+      <img id="shape" src="https://storage.googleapis.com/cms-storage-bucket/4fd5520fe28ebf839174.svg"/>
+  </div>
+  </body>
+  </html>
+''';
+
 class WebViewExample extends StatefulWidget {
   const WebViewExample({super.key, this.cookieManager});
 
@@ -325,6 +345,7 @@ enum MenuOptions {
   logExample,
   basicAuthentication,
   javaScriptAlert,
+  viewportMeta,
 }
 
 class SampleMenu extends StatelessWidget {
@@ -380,6 +401,8 @@ class SampleMenu extends StatelessWidget {
             _promptForUrl(context);
           case MenuOptions.javaScriptAlert:
             _onJavaScriptAlertExample(context);
+          case MenuOptions.viewportMeta:
+            _onViewportMetaExample();
         }
       },
       itemBuilder: (BuildContext context) => <PopupMenuItem<MenuOptions>>[
@@ -452,6 +475,10 @@ class SampleMenu extends StatelessWidget {
           value: MenuOptions.javaScriptAlert,
           child: Text('JavaScript Alert Example'),
         ),
+        const PopupMenuItem<MenuOptions>(
+          value: MenuOptions.viewportMeta,
+          child: Text('Viewport meta example'),
+        ),
       ],
     );
   }
@@ -748,6 +775,10 @@ class SampleMenu extends StatelessWidget {
             }) ??
         '';
   }
+
+  Future<void> _onViewportMetaExample() {
+    return webViewController.loadHtmlString(kViewportMetaPage);
+  }
 }
 
 class NavigationControls extends StatelessWidget {
diff --git a/packages/webview_flutter/webview_flutter_android/lib/src/android_webview_controller.dart b/packages/webview_flutter/webview_flutter_android/lib/src/android_webview_controller.dart
@@ -86,7 +86,7 @@ class AndroidWebViewController extends PlatformWebViewController {
     _webView.settings.setJavaScriptCanOpenWindowsAutomatically(true);
     _webView.settings.setSupportMultipleWindows(true);
     _webView.settings.setLoadWithOverviewMode(true);
-    _webView.settings.setUseWideViewPort(true);
+    _webView.settings.setUseWideViewPort(false);
     _webView.settings.setDisplayZoomControls(false);
     _webView.settings.setBuiltInZoomControls(true);
 
@@ -599,6 +599,13 @@ class AndroidWebViewController extends PlatformWebViewController {
   Future<void> setTextZoom(int textZoom) =>
       _webView.settings.setTextZoom(textZoom);
 
+  /// Sets whether the WebView should enable support for the "viewport" HTML
+  /// meta tag or should use a wide viewport.
+  ///
+  /// The default is false.
+  Future<void> setUseWideViewPort(bool use) =>
+      _webView.settings.setUseWideViewPort(use);
+
   /// Enables or disables content URL access.
   ///
   /// The default is true.
diff --git a/packages/webview_flutter/webview_flutter_android/pubspec.yaml b/packages/webview_flutter/webview_flutter_android/pubspec.yaml
@@ -2,7 +2,7 @@ name: webview_flutter_android
 description: A Flutter plugin that provides a WebView widget on Android.
 repository: https://github.com/flutter/packages/tree/main/packages/webview_flutter/webview_flutter_android
 issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+webview%22
-version: 4.5.0
+version: 4.6.0
 
 environment:
   sdk: ^3.6.0
diff --git a/packages/webview_flutter/webview_flutter_android/test/android_webview_controller_test.dart b/packages/webview_flutter/webview_flutter_android/test/android_webview_controller_test.dart
@@ -289,7 +289,7 @@ void main() {
           .called(1);
       verify(mockWebSettings.setLoadWithOverviewMode(true)).called(1);
       verify(mockWebSettings.setSupportMultipleWindows(true)).called(1);
-      verify(mockWebSettings.setUseWideViewPort(true)).called(1);
+      verify(mockWebSettings.setUseWideViewPort(false)).called(1);
     });
 
     test('loadFile without file prefix', () async {
@@ -1598,6 +1598,22 @@ void main() {
     verify(mockSettings.setMediaPlaybackRequiresUserGesture(true)).called(1);
   });
 
+  test('setUseWideViewPort', () async {
+    final MockWebView mockWebView = MockWebView();
+    final MockWebSettings mockSettings = MockWebSettings();
+    final AndroidWebViewController controller = createControllerWithMocks(
+      mockWebView: mockWebView,
+      mockSettings: mockSettings,
+    );
+
+    clearInteractions(mockWebView);
+
+    await controller.setUseWideViewPort(true);
+
+    verify(mockWebView.settings).called(1);
+    verify(mockSettings.setUseWideViewPort(true)).called(1);
+  });
+
   test('setAllowContentAccess', () async {
     final MockWebView mockWebView = MockWebView();
     final MockWebSettings mockSettings = MockWebSettings();
