在手机上查看 Flutter 网页

我正在构建一个flutter的网络应用程序,但我希望它在移动设备和桌面设备上表现不同。为了测试它,是否可以在手机浏览器或模拟器的浏览器中运行 Web 应用程序?谢谢

stack overflow View Flutter web on mobile
原文答案
author avatar

接受的答案

不,您不能在本地移动浏览器中运行 Flutter Web 应用程序,如果您想使用移动格式测试您的应用程序,您可以通过在开发人员工具 Ctrl+Shift+M 中启用设备工具栏从 Google Chrome 浏览器模拟它。


答案:

作者头像

是的,可以在生产时在 Web 浏览器中测试您的代码。为此,请在打开的项目的终端中运行以下代码

flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0

然后,前往您的手机浏览器并输入

HTTP://<your IP address>:8080

Testing in my phone browser

Testing in my Mac browser

作者头像

上面的答案是不正确的。我在模拟器的移动浏览器中测试了我所有的 Flutter Web 开发。我使用 VS 代码。您的环境可能不同。

  1. 为 Chrome (web) 运行项目。这将启动本地服务器和 Chrome 浏览器。从浏览器复制 URL。就我而言,我让它始终是 http://localhost:8686/#/
  2. 启动模拟器。
  3. 在模拟器上启动 Safari 或任何其他浏览器。将 URL 粘贴到浏览器中。

如果它与您的开发机器位于同一本地网络上,您甚至可以从真实手机访问该项目。只需将 localhost 替换为您的开发机器的 IP 地址即可。