Repository: flutter
Issue: [WEB] FlutterView not notified about aspect ratio and devicePixelRatio changes in safari
Labels: platform-web,has reproducible steps,browser: safari-macos,P2,team-web,triaged-web,found in release: 3.24

### Steps to reproduce

1. Create and run any flutter web app (counter example in my case)
2. Open it in safari
3. move the safari window from mac monitor to second monitor with bigger pixelRatio
(This step can be also reproduced usong safari dev tools. Open adaptive design, and change pixelRatio to 2x or 3x
5. Trigger ui rebuild (in my case by hovering FAB)

### Expected results

Nothing unusual happens, app looks same as on macbook monitor

### Actual results

Looks like that flutter is not notified about pixelRatio change, when safari window is moved to external monitor. When window is moved and ui rebuild is triggered UI is stretched. Same code sample in chrome works fine, logs in debug console are fired and Ui is not getting stretched. 
This bug can be reproduced on safari 17.6 (19618.3.11.11.5) (latest), 
17.5 (18618.2.12.111.5, 18618) and 16.6.1 (I wasn't able to test on other versions)

### Code sample

<details open><summary>Code sample</summary>

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (c, size) {
        print("Size: ${MediaQuery.of(context).size.width},${MediaQuery.of(context).size.height} ");
                       print("aspectRatio: ${MediaQuery.of(context).size.width},${MediaQuery.of(context).size.aspectRatio} ");
                      print("devicePixelRatio: ${MediaQuery.of(context).devicePixelRatio}");
                      print("-----------------------------------------------------");
                     
        return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: const MyHomePage(title: 'Flutter Demo Home Page'),
      );
      },
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
     _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), 
    );
  }
}
```

</details>


### Screenshots or Video

<details open>
<summary>Screenshots / Video demonstration</summary>
[7723db4d-7aff-0d0e-0771-a5641bddd151_custom.mp4.zip](https://github.com/user-attachments/files/16622969/7723db4d-7aff-0d0e-0771-a5641bddd151_custom.mp4.zip)
![image](https://github.com/user-attachments/assets/ba810deb-d815-4bf5-99d6-b777783a04e7)


https://github.com/user-attachments/assets/2ecac2ee-e390-4acd-9d68-2c4a0487c02b



</details>


### Logs

<details open><summary>Logs</summary>

```console
[Log] Size: 1081,331  (main.dart.js, line 17526)
[Log] aspectRatio: 1081,3.2658610271903323  (main.dart.js, line 17526)
[Log] devicePixelRatio: 1 (main.dart.js, line 17526)
[Log] ----------------------------------------------------- (main.dart.js, line 17526)
[Log] Size: 1075,331  (main.dart.js, line 17526)
[Log] aspectRatio: 1075,3.2477341389728096  (main.dart.js, line 17526)
[Log] devicePixelRatio: 2 (main.dart.js, line 17526)
[Log] ----------------------------------------------------- (main.dart.js, line 17526)
[Log] Size: 1074,331  (main.dart.js, line 17526)
[Log] aspectRatio: 1074,3.2447129909365557  (main.dart.js, line 17526)
[Log] devicePixelRatio: 2 (main.dart.js, line 17526)
[Log] ----------------------------------------------------- (main.dart.js, line 17526)
[Log] Size: 1080,331  (main.dart.js, line 17526)
[Log] aspectRatio: 1080,3.2628398791540785  (main.dart.js, line 17526)
[Log] devicePixelRatio: 1 (main.dart.js, line 17526)
[Log] ----------------------------------------------------- (main.dart.js, line 17526)
[Log] Size: 1081,331  (main.dart.js, line 17526)
[Log] aspectRatio: 1081,3.2658610271903323  (main.dart.js, line 17526)
[Log] devicePixelRatio: 1 (main.dart.js, line 17526)
[Log] ----------------------------------------------------- (main.dart.js, line 17526)
[Log] Size: 1082,331  (main.dart.js, line 17526)
[Log] aspectRatio: 1082,3.268882175226586  (main.dart.js, line 17526)
[Log] devicePixelRatio: 1 (main.dart.js, line 17526)
[Log] ----------------------------------------------------- (main.dart.js, line 17526)
[Log] Size: 1083,331  (main.dart.js, line 17526)
[Log] aspectRatio: 1083,3.27190332326284  (main.dart.js, line 17526)
[Log] devicePixelRatio: 1 (main.dart.js, line 17526)
[Log] ----------------------------------------------------- (main.dart.js, line 17526)
```

</details>


### Flutter Doctor output

<details open><summary>Doctor output</summary>

```console
[✓] Flutter (Channel stable, 3.24.0, on macOS 11.7.10 20G1427 darwin-x64, locale uk-UA)
    • Flutter version 3.24.0 on channel stable at /Users/pm/Desktop/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 80c2e84975 (2 weeks ago), 2024-07-30 23:06:49 +0700
    • Engine revision b8800d88be
    • Dart version 3.5.0
    • DevTools version 2.37.2

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/to/macos-android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      flutter config --android-sdk to update to that location.


[!] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13C100
    ✗ Flutter requires Xcode 14 or higher.
      Download the latest version or update via the Mac App Store.
    ! CocoaPods 1.12.1 out of date (1.13.0 is recommended).
        CocoaPods is a package manager for iOS or macOS platform code.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/to/platform-plugins
      To update CocoaPods, see
      https://guides.cocoapods.org/using/getting-started.html#updating-cocoapods

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/to/macos-android-setup for detailed instructions).

[✓] VS Code (version 1.92.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.95.20240801

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 11.7.10 20G1427 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 127.0.6533.119

[✓] Network resources
    • All expected network resources are available.

```

</details>