Experiencing Zoom Issue on Flutter Web Project:
While working on my Flutter web project, I have encountered an issue where the page loads with a zoomed-in view on certain devices. Despite setting the viewport meta tag correctly, the zoom problem persists. The only way to resolve it is by interacting with the page, such as scrolling or resizing, which eventually adjusts the page to its correct size. I have attempted debugging using innerHeight and outerHeight, but so far, haven't found a solution. Below are snippets from my index.html file along with screenshots for reference.
Expected Behavior:
My expectation is that the Flutter web page should load properly without any zoom-related issues across all devices.
Current Behavior:
The issue manifests on specific devices where the page initially loads in a zoomed-in state. It's only after interacting with the page that the zoom problem gets rectified.
Attempts Made:
I have tried:
- Ensuring correct configuration of the viewport meta tag
- Utilizing innerHeight and outerHeight for troubleshooting
Despite these efforts, the problem still remains unresolved.
Code Sample:
Provided below is a snippet from my index.html file:
<!DOCTYPE html>
<html>
<!-- Code snippet removed for brevity -->
</html>
Additional Details:
Flutter version: 3.22.2 Affected Browsers: Chrome (Android) Devices Affected: Samsung Galaxy S22 Plus / Moto G9
Any suggestions on ensuring that the Flutter web page loads correctly without zoom issues across all devices would be greatly appreciated.