[canvaskit] Use visualViewport.scale to determine device pixel ratio. (#163688)

When using Chrome for Android with "Request Desktop Site" checked will
cause the browser to set the `visualViewport` to have a very large size
and a scale of less than 1. If we do not account for the scale, then we
will create a huge bitmap (on a Pixel 4 emulator with "Request Desktop
Site" checked the viewport size was ~2500 x ~5000). Attempting to create
a too-large bitmap can silently fail and create a bitmap that is
slightly too small. This fixes Flutter Web to take the visual viewport
scale into account so we don't create enormous (and potentially flaky)
bitmaps on every frame.

BEFORE:

![Screenshot 2025-02-18 at 10 30
59 AM](https://github.com/user-attachments/assets/0bc5194a-59d7-4dcd-9240-b60c85f5d119)


AFTER:

![Screenshot 2025-02-19 at 4 44
53 PM](https://github.com/user-attachments/assets/ac62e141-da87-4463-a5f9-d15477951bb7)


Fixes https://github.com/flutter/flutter/issues/136319
Fixes https://github.com/flutter/flutter/issues/154162

## Pre-launch Checklist

- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel
on [Discord].

<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview
[Tree Hygiene]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md
[test-exempt]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes
[Discord]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md
[Data Driven Fixes]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

engine/src/flutter/lib/web_ui/lib/src/engine/display.dart

@@ -40,9 +40,16 @@ class EngineFlutterDisplay extends ui.Display {
   ///
   /// This value cannot be overriden by tests, for example.
   double get browserDevicePixelRatio {
-    final double ratio = domWindow.devicePixelRatio;
+    double ratio = domWindow.devicePixelRatio;
     // Guard against WebOS returning 0.
-    return (ratio == 0.0) ? 1.0 : ratio;
+    ratio = (ratio == 0.0) ? 1.0 : ratio;
+
+    // The device pixel ratio is also affected by the scale factor of the
+    // viewport. For example, on Chrome for Android, if the page is requested
+    // with "Request Desktop Site" enabled, then the viewport size will be
+    // very large, with the viewport scale less than 1.
+    final double scale = domWindow.visualViewport?.scale ?? 1.0;
+    return ratio * scale;
   }
 
   /// Overrides the default device pixel ratio.

engine/src/flutter/lib/web_ui/lib/src/engine/dom.dart

@@ -2139,6 +2139,10 @@ extension DomVisualViewportExtension on DomVisualViewport {
   @JS('width')
   external JSNumber? get _width;
   double? get width => _width?.toDartDouble;
+
+  @JS('scale')
+  external JSNumber? get _scale;
+  double? get scale => _scale?.toDartDouble;
 }
 
 @JS()

engine/src/flutter/lib/web_ui/lib/src/engine/util.dart

@@ -904,6 +904,9 @@ class BitmapSize {
   @override
   int get hashCode => Object.hash(width, height);
 
+  @override
+  String toString() => 'BitmapSize($width, $height)';
+
   ui.Size toSize() {
     return ui.Size(width.toDouble(), height.toDouble());
   }

engine/src/flutter/lib/web_ui/test/engine/display_test.dart

@@ -27,5 +27,16 @@ void testMain() {
       display.debugOverrideDevicePixelRatio(null);
       expect(display.devicePixelRatio, originalDevicePixelRatio);
     });
+
+    test('computes device pixel ratio using window.devicePixelRatio and visualViewport.scale', () {
+      final EngineFlutterDisplay display = EngineFlutterDisplay(
+        id: 0,
+        size: const ui.Size(100.0, 100.0),
+        refreshRate: 60.0,
+      );
+      final double windowDpr = domWindow.devicePixelRatio;
+      final double visualViewportScale = domWindow.visualViewport!.scale!;
+      expect(display.browserDevicePixelRatio, windowDpr * visualViewportScale);
+    });
   });
 }