在移动设备上显示引导模式

Question

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

我试图在我的模板中使用引导程序responsive utilities，特别是类.hidden-md-up，但无论我在哪个地方使用此类，都会有一些剩余的覆盖图会禁用某些网站功能。这是因为我仍然打开模态，然后隐藏它：不是一个优雅的解决方案。

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

Answer 1

您可以使用如下所示的matchmedia，但它依赖于硬编码引导程序更改的宽度

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

如果您不想对宽度进行硬编码，请查看此帖子以了解确定引导程序大小中断的方法：https://stackoverflow.com/a/28373319/4553162