Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Splash Screen changes Sizes on app start running over Web on mobile #276

Closed
mpopolin opened this issue Jan 30, 2022 · 3 comments
Closed

Comments

@mpopolin
Copy link

Describe the bug
The splash screen image size increases when running on Web using Android or iOS devices.

To Reproduce
Steps to reproduce the behavior:

  1. Clone the repo
  2. Build the app for web
  3. Deploy it in any service (already deployed here if needed to test: https://laughing-lichterman-2dbaa2.netlify.app)
  4. See error: image starts small and then increases size

Expected behavior
The image should be the same during all the splash screen

Screenshots
WhatsApp Image 2022-01-30 at 20 11 57
WhatsApp Image 2022-01-30 at 20 11 57 (1)

Device (please complete the following information):

  • Device: any mobile device

Flutter doctor
[✓] Flutter (Channel stable, 2.8.1, on macOS 11.6.2 20G314 darwin-x64, locale pt)
• Flutter version 2.8.1 at /Users/marcelcunha/Desktop/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 77d935af4d (6 weeks ago), 2021-12-16 08:37:33 -0800
• Engine revision 890a5fca2e
• Dart version 2.15.1

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
• Android SDK at /Users/marcelcunha/Library/Android/sdk
• Platform android-31, build-tools 30.0.2
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
• All Android licenses accepted.

[!] Xcode - develop for iOS and macOS (Xcode 12.5.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
! Flutter recommends a minimum Xcode version of 13.0.0.
Download the latest version or update via the Mac App Store.
• CocoaPods version 1.11.2

[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
• 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 1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.63.2)
• VS Code at /Users/marcelcunha/Desktop/Visual Studio Code.app/Contents
• Flutter extension version 3.32.0

[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-x64 • macOS 11.6.2 20G314 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 97.0.4692.99

Additional context
Only occurs if running on web on mobile devices. Desktop browsers are OK.

@jonbhanson
Copy link
Owner

@mpopolin can you try inserting this in the <head> of your web/index.html file:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>

Please let me know if this solves it so I can add a fix for this package.

@mpopolin
Copy link
Author

mpopolin commented Feb 2, 2022

@jonbhanson yes, it does. Thank you!

@mdeandrea-mrmilu
Copy link

When use <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/> Flutter throw a warning:

WARNING: found an existing tag. Flutter Web uses its own viewport configuration for better compatibility with Flutter. This tag will be replaced.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants