如何在桌面上测试移动版的 React 自适应设计?(视窗)



我最近一直在用React和Node建立一个网站。我目前正在移动网站上工作。我一直在本地运行所有内容,目前在 chrome 商店中使用模拟器(瑞波测试版(或通过 Surge 部署它来测试移动版本。但是,通过 surge 在我的手机上运行它最终与在桌面上运行它不同。

现在,在您建议可能导致差异的原因之前,我还想指出,我目前正在实现以下内容(基于我在其他类似线程中看到的内容(:

<meta name="viewport" content="width=device-width, initial-scale=1">

反应响应包

我想保持我的网站单一网址而不是使用m(dot(.link,我还想使用自适应设计而不是响应式设计(我知道响应式通常更好(。

模拟器不足以进行测试的一个示例是测试与非常特定的语法的兼容性。例如,iPhone不理解某些es6语法,例如某些日期格式的"new Date((",而Android则理解。

有没有办法在桌面上测试移动自适应设计,以便我可以在我的计算机上本地运行它,而不必每次都部署在 surge 上(这样我就可以在手机上打开它(。

这将使调试此类问题变得更加容易!我已经看到很多类似的响应式设计线程,但我认为自适应设计(与我的实际桌面网站设计完全不同的设计(可能会有如上所述的独特问题。但是,如果我仍然可以使用桌面版本的核心功能/组件,那就太好了。

我参与了一个学校项目,要求我们使用真正的手机测试我们的网络应用程序。我们所做的是托管一个Firebase服务器。

  • 首先安装 Firebase cli:
npm install -g firebase-tools
  • 在控制台中键入firebase init。(https://firebase.google.com/docs/hosting/deploying 供参考(
  • 使用firebase deploy将您的代码推送到您的主机上,然后您可以转到手机上的网址,它应该运行良好。Firebase 部署就像一个 git push,需要几秒钟才能完成,所以它非常快。

编辑:抱歉没有意识到Surge做了同样的事情。但是,我认为您可以轻松地在计算机上进行测试。虽然你可以下载Xcode,如果你有Mac并使用iPhone模拟器,以及Android模拟器的Android Studio。但是两者都需要很长时间才能启动,个性,我会部署到浪涌或火力基地,如果你有的话,我会在真正的手机上进行测试。

如果您的手机和笔记本电脑位于同一 wifi 上,则可以在手机上访问本地托管的 Web 应用程序。

步骤

  • 像往常一样运行您的 react Web 应用程序,它将在http://localhost:3000上可用
  • 转到终端并键入ifconfig | grep inet.这将检查笔记本电脑的本地网络 IP,例如192.168.0.10
  • 在手机上,打开浏览器和网址http://192.168.0.10:300

:我们已将localhost替换为 IP192.168.0.10

最新更新