javascript - 获取指示当前@media 类型的 javascript 变量

Question

我正在使用 Bootstrap 和 Angular。

我目前有一个 ng-repeat 是这样设置的:

<div class="row">
   <div ng-if="viewType == 'grid'">
      <div ng-repeat="product in filteredProducts | filter:search" >
         <product-tile-view class="hidden-print col-lg-2 col-md-3 col-sm-4 col-xs-6" product="product" on-selected="deviceSelected(product)" on-compare="compare(product)"></product-tile-view>
         <product-tile-view class="visible-print-block col-xs-4" product="product" on-selected="deviceSelected(product)" on-compare="compare(product)"></product-tile-view>
         <div class="clearfix visible-lg" ng-if="($index + 1) % 6 == 0"></div>
         <div class="clearfix visible-md" ng-if="($index + 1) % 4 == 0"></div>
         <div class="clearfix visible-sm" ng-if="($index + 1) % 3 == 0"></div>
         <div class="hidden-print clearfix visible-xs" ng-if="($index + 1) % 2 == 0"></div>
         <div class="visible-print-inline clearfix visible-xs" ng-if="($index + 1) % 3 == 0"></div>
      </div>
 ...other unreleated code, divs are closed.

这确实有效。简要说明它在做什么:

根据屏幕大小，行包含 6 个元素 (lg-2)、4 个元素 (md-3)、3 个元素 (sm-4) 或 2 个元素 (xs-6)。基于 bootstrap 的 12 列宽度。 clearfix 用于重置行，它仅在适当的屏幕尺寸下可见，而 ng-if 仅在索引与适当的行匹配时才将其添加到 dom。

根据媒体类型(浏览器或打印机)，添加额外的 Bootstrap css。这是因为 bootstrap 将所有打印机屏幕尺寸视为 xs。打印时我想要每行 3 个元素(而不是 2 个)。为此，我在打印时隐藏了响应指令，并显示了一个仅定义了 col-xs-4 的指令。我还在打印时隐藏了原始的 xs clearfix，并显示了一个适合 col-xs-4 的。

所有这些都有效，但问题是这些 Bootstrap 媒体 css 类正在隐藏/显示。这意味着在幕后隐藏了大量额外的 DOM 垃圾。

回到我的观点。我现在可以使用隐藏的屏幕大小的 clearfixes，但我想使用 ng-if 而不是 hidden-print/visible-print 类来不将指令写入 DOM 两次。

基本获取表示当前媒体类型(打印机/浏览器)的变量的最佳方法是什么？我想像<ng-if currentMediaType == 'print'>一样使用它如果可能的话。

Answer 1

如果您发现无法使用 css 制作您想要的内容，您可以使用 window.matchMedia() 检测当前媒体.例如

var is_screen = window.matchMedia("screen").matches;  //bool 
var is_tv = window.matchMedia("tv").matches;           

参数是任何有效的媒体查询表达式。