网格系统未按预期工作,单元格 phone 屏幕的宽度比最小尺寸浏览器小得多

The grid system does not work as expected, the width of the cell phone screen is much smaller than a minimum size browser

我用 angular 构建了网络应用程序,我编写了代码,以便该应用程序完全负责移动使用。 (或者我是这么想的) 我使用 bootatrep 的网格系统和媒体查询通过最小化 google chrome 页面来使应用程序适合,以检查应用程序是否适合。

昨天我部署了一个应用程序,发现它根本没有像我预期的那样响应,而且 phone 屏幕比 Web 浏览器允许的最小屏幕小得多。 有谁知道如何安排吗?以及以后如何避免此类问题?

Picture to illustrate the situation

有一些解决方案可以直接在您的 phone 上测试您的网站,然后再将其构建到生产环境中。 您可以在 phone 上轻松调试本地应用程序。您的 phone 应该在同一个 wifi/network 上。

第一个解决方案:

ng serve --host

本期解释的选项:https://github.com/angular/angular-cli/issues/1793.

ng serve --host 0.0.0.0

查找您的本地 IP 地址 (https://lifehacker.com/how-to-find-your-local-and-external-ip-address-5833108) 从您的 phone 或其他设备导航至 <local ip adress>:4200

第二种解法

有一些软件可以在浏览器中模拟 phone。其中之一就是这个:https://blisk.io/