基于媒体查询的可选 Javascript 执行答案

【问题标题】：Optional Javascript Execution based on Media Queries基于媒体查询的可选 Javascript 执行
【发布时间】：2012-10-12 12:22:55
【问题描述】：

我试图弄清楚如何根据当前的设备/媒体查询有选择地运行一段 javascript。我正在使用 Twitter Bootstrap 并且基本上有两个版本的媒体查询：

@media (min-width: 980px) { ... } <!-- Desktops -->
@media (max-width: 979px) { ... } <!-- Smaller screens/tablets/phones -->

我有一张我生成的地图，但出于和宽度的原因，我没有在移动/小屏幕版本中显示它。然而，即使您在移动屏幕上看不到 javascript，它仍会在后台执行。所以，我正在尝试在 javascript 中找到一种方法，我可以执行以下操作：

// Imaginary function
var screenType = getScreenType();

if(screenType == 1) {
   // Load map
}

我read about 有人在他们的媒体查询中将 CSS 属性设置为特定值，然后尝试根据 CSS 属性在 DOM 中找到该元素，但必须有更好的方法。有什么想法吗？

【问题讨论】：

标签： javascript css media-queries

【解决方案1】：

当前接受的答案不够好，你应该检查window.matchMedia

您可以检测视口尺寸的变化，但您必须计算方向和纵横比等因素，并且不能保证我们的计算在应用媒体查询规则时会匹配我们的浏览器假设。

我的意思是，您可以计算 X，但您的浏览器假设可以是 Y。所以我认为最好使用相同的浏览器规则，window.matchMedia 会这样做

var jmediaquery = window.matchMedia( "(min-width: 480px)" )
if (jmediaquery.matches) {
    // window width is at least 480px
}
else {
    // window width is less than 480px
}

您甚至可以使用侦听器接收查询通知

var jmediaquery = window.matchMedia("(orientation: portrait)");
jmediaquery.addListener(handleOrientationChange);
handleOrientationChange(jmediaquery);

function handleOrientationChange(jmediaquery) {
    if (jmediaquery.matches) {
        // orientation changed
    }
}

如果您不再需要接收有关更改的通知，只需调用 removeListener()

jmediaquery.removeListener(handleOrientationChange);

【讨论】：

好主意！感谢您及时更新此问题。
如果您调整浏览器窗口的大小，接受的答案不会让您检查结果，因此出于开发目的，这个答案更好。谢谢！
伟大的洞察力，+1
很高兴知道这一点！谢谢！
我们就是这样做的！ +1

【解决方案2】：

您可能会发现 Enquire.js 库很有帮助：

http://wickynilliams.github.com/enquire.js/

CSS 技巧文章：http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/

【讨论】：

非常有用的库，尽管我在我的特定实例中考虑，纯 Javascript 可能是最轻量级的解决方案。不过感谢您指出 Inquire，我可能会在以后的项目中使用它。

【解决方案3】：

使用 javascript 怎么样？

<script type="text/javascript">

if (screen.width < 980) { 

document.write('<link href="UrLowRes.css" type="text/css" rel="stylesheet"/>');

} else { 

document.write('<link href="UrlHighRes.css" type="text/css" rel="stylesheet"/>');

} 

</script>

【讨论】：

有趣，我认为这将是一个可以接受的解决方案。谢谢。
如果您的窗口宽度可以调整大小，您可能需要添加对窗口宽度变化的监控？
我主要关心的不是在移动设备上浪费带宽，所以在这种情况下，宽度变化不太可能影响我的目标。
@jfriend00: screen.width 或 screen.height 处理的是显示的大小，而不是窗口的大小。显示器的大小是硬件固定的，不能改变。
@frenchie - 设备旋转时会怎样？

【解决方案4】：

你也可以使用一个叫做 minwidth 的插件：

minwidth(940, function () {
  //do whatever you need
});

但它仅在页面加载时才有效，而不是在调整大小时..

http://edenspiekermann.com/en/blog/responsive-javascript-helpers

【讨论】：