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

Question

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

我试图在我的模板中利用引导响应实用程序.hidden-md-up，特别是 class ，但无论我在哪里使用这个类，最终都会有一些剩余的覆盖层禁用某些站点功能。这是因为我仍在打开模式，然后将其隐藏：这不是一个优雅的解决方案。

我正在寻找任何方法来利用引导程序来感知小屏幕/移动设备。我正在使用 Angular 2，因此我避免使用 jQuery。我还没有在我的项目中使用 jQuery。避免仅仅为了这个额外功能而加载库会很好

score 1 · Accepted Answer

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

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

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

1 回答 1