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

Question

我试图找出如何根据当前的设备/媒体查询选择运行一个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中找到该元素,但必须有更好的方法.有任何想法吗？

Answer 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);

Answer 2

您可能会发现Enquire.js库很有用:

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

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

Answer 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>