[Web] UI is stretched on mobile browser when Desktop Site is on #136319
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
Steps to reproduce
- Enable web-support
- Find IP address of your machine.
- Run
flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0 --web-renderer canvaskit - Open android emulator or your android physical device which is on same network as the machine where previous command was run.
- Open chrome browser
- Launch the app with weburl as IP address found in Step 2 and port 8080. For example 192.168.1.5:8080
- Click on the button in the code provided. The box will change color.
- Enable Desktop-mode from settings of Chrome (on android device/emulator)
- Repeat step 7.
Expected results
Flutter web should work in desktop mode on mobile/tablet browsers without any issue.
Actual results
There is no click and the UI is stretched as well.
Code sample
Code sample
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(
home: _HomePage(),
));
}
class _HomePage extends StatefulWidget {
const _HomePage({
Key? key,
}) : super(key: key);
@override
State<_HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<_HomePage> {
Color currentColor = Colors.pink;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SizedBox.square(
dimension: 200,
child: ColoredBox(
color: currentColor,
child: FilledButton.tonal(
onPressed: () {
currentColor = (List.from(Colors.primaries)..shuffle()).first;
setState(() {});
},
child: const Text('Button')),
),
),
));
}
}
Screenshots or Video
Screenshots / Video demonstration
[Upload media here]
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
[!] Flutter (Channel stable, 3.13.6, on macOS 14.0 23A344 darwin-arm64, locale en-IN)
• Flutter version 3.13.6 on channel stable at /Users/rahul/fvm/versions/stable
! Warning: `flutter` on your path resolves to /Users/rahul/fvm/versions/3.3.0/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/rahul/fvm/versions/stable. Consider adding /Users/rahul/fvm/versions/stable/bin to the front of your path.
! Warning: `dart` on your path resolves to /Users/rahul/fvm/versions/3.3.0/bin/dart, which is not inside your current Flutter SDK checkout at /Users/rahul/fvm/versions/stable. Consider adding /Users/rahul/fvm/versions/stable/bin to the front of your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision ead455963c (2 weeks ago), 2023-09-26 18:28:17 -0700
• Engine revision a794cf2681
• Dart version 3.1.3
• DevTools version 2.25.0
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /Users/rahul/Library/Android/sdk
• Platform android-34, build-tools 34.0.0
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 15.0)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 15A240d
• CocoaPods version 1.13.0
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2022.3)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
[✓] IntelliJ IDEA Community Edition (version 2023.2.1)
• IntelliJ at /Applications/IntelliJ IDEA CE.app
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
[✓] VS Code (version 1.83.0)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.74.0
[✓] Connected device (4 available)
• sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 14 (API 34) (emulator)
• Rahul’s iPad (mobile) • <private_data> • ios • iOS 17.0.3 21A360
• macOS (desktop) • macos • darwin-arm64 • macOS 14.0 23A344 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 117.0.5938.149
[✓] Network resources
• All expected network resources are available.
! Doctor found issues in 1 category.
</details>