在移动设备上显示 bootstrap 模式

Question

我创建了一个模式来警告移动用户在继续浏览我的数据密集型网站之前打开他们的 WIFI。我想在移动 (xs, s) 设备上打开此模式。我正在使用 bootstrap 4.

我尝试在我的模板中利用 bootstrap responsive utilities，尤其是 class .hidden-md-up，但无论我在哪里使用这个 class ，最终会有一些剩余的覆盖层禁用某些站点功能。这是因为我仍在打开模式，然后将其隐藏：这不是一个优雅的解决方案。

我正在寻找任何方法来利用 bootstrap 来感知小屏幕/移动设备。 我正在使用 angular 2，因此我避免 jQuery。我还没有在我的项目中使用 jQuery。最好避免仅仅为了这个奖励功能而加载库

Answer 1

您可以如下使用 matchmedia，但它依赖于硬编码 bootstrap 在

处更改的宽度

if (window.matchMedia('(max-width: 767px)').matches) {
    //load your modal here
} else {
    //...
}

如果您不想对宽度进行硬编码，请查看此 post 以确定 bootstrap 大小间隔的方法：

Display bootstrap modal on mobile devices