10

我试图弄清楚如何根据当前的设备/媒体查询有选择地运行一段 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
}

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

4

4 回答 4

32

当前接受的答案不够好，您应该检查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);
于 2013-08-11T16:55:52.117 回答
12

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

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

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

于 2012-10-22T16:40:56.450 回答
2

使用 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>
于 2012-10-22T16:33:55.420 回答
1

您还可以使用名为 minwidth 的插件：

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

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

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

于 2012-10-22T16:38:51.513 回答