Flutter Web 应用程序未在移动浏览器中加载答案

【问题标题】：Flutter Web Application Not Loading In Mobile BrowserFlutter Web 应用程序未在移动浏览器中加载
【发布时间】：2021-12-28 05:49:43
【问题描述】：

我使用 Flutter 为我的企业创建了一个移动应用程序，它是 published in PlayStore，运行良好。

后来，我将应用程序转换为对网络友好的应用程序，并使用 Flutter Web 构建它，并使用 Firebase 托管。您可以在这里查看网站：https://youmenotes.com/immadekada/bambusa/#/

现在我要解决的问题是，该网站在桌面浏览器中按预期加载，但是如果我尝试使用手机浏览器打开此 URL，它就会卡在白屏中。不知道如何解决。

如果有人遇到同样的问题，请告诉我这个问题。

谢谢！

注意：我有另一个使用相同方式托管的 Flutter Web 应用程序（演示应用程序），它在 PC 和移动浏览器上都可以正常运行。网址是这样的：https://youmenotes.com/immadekada/bambusa/game1/#/

【问题讨论】：

你检查过你的服务器日志吗？比如你有没有发现任何错误？因为它在桌面版 chrome 上的工作方式很奇怪，但在移动视图中却不行。

标签： flutter flutter-web

【解决方案1】：

这件事发生在我身上-

第 1 步：检查它是否在本地运行良好对于该运行以下命令

flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0
并检查您的手机是否与您的电脑相同的网络输入网址<pc's ip address:8080/>

第二步：用更适合移动浏览器的canvaskit渲染构建网页，

命令：flutter build web --web-renderer canvaskit --release 和释放它。

【讨论】：

【解决方案2】：

感谢您花时间寻找问题的解决方案。在这里我找到了解决方案。

这是一个简单的编码问题，导致移动浏览器出现错误行为！

我的应用程序中有一些仅限移动设备的功能，我使用以下方法处理了这些功能：

bool isMobile() {
  if (defaultTargetPlatform == TargetPlatform.iOS ||
          defaultTargetPlatform == TargetPlatform.android) {
    return true;
  } else {
    return false;
  }
}

因此，当从移动设备作为移动应用程序运行时，它按预期工作，并作为网络应用程序在计算机上运行。但是，当它从移动设备作为 Web 应用程序运行时，该方法返回 true，因为平台是 Android/iOS。这导致我的业务逻辑行为不端。

我通过添加kIsWeb 对网络进行了适当的检查，更新了 if 条件，并且该方法开始正确返回值。

现在该 URL 在 Web 和移动浏览器中都可以正确加载。 https://youmenotes.com/immadekada/bambusa/#/

感谢您的宝贵时间。

更新：

我是如何发现问题的？

在移动设备上使用Remote Debugging。您可以使用 URL chrome://inspect/#devices 在 chrome 上导航到此页面

谢谢，米顿。

【讨论】：