Flutter Web does not render correctly when chrome app on mobile with desktop site ON

Question

I have deployed a personal flutter-web project on firebase and the responsiveness is working fine. As in when the website is opened on a laptop it shows a UI specific for large screens and when it's opened on the mobile phones (chrome browser) it shows UI for mobile screens.

Now the problem is, whenever I check "Desktop Site" in the chrome browser, I get the UI that is meant to be shown for larger screens which is okay, but it looks stretched vertically, and the appbar at the top is also not visible.

so my question is,

Is there a way that I could check whether browser's desktop-site mode is ON? or any other way that I could just make the website look like a zoom-out version of web UI whenever desktop-site mode is ON?

Answer 1

We were not shown the code. Therefore, it is difficult to say for sure. But I had such problems when I ran the application building without parameter --web-renderer

flutter build web The point was that by default it uses different renderers (CanvasKit for desktop and HTML for mobile). And since I used things that required CanvasKit, the application in mobile browsers was displayed incorrectly.

Building with the appropriate parameter solved my problem

flutter build web --web-renderer canvaskit