Question

我正在试图找出如何根据当前设备/媒体查询选择运行一个javascript块。我正在使用Twitter Bootstrap，基本上有两个版本的媒体查询：

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

我有一张我生成的地图，但我没有在移动/小屏幕版本中显示forb和宽带原因。然而，即使您无法在移动屏幕上看到它，javascript仍会在后台执行。所以，我试图在javascript中找到一种方法，我可以做一些像：

// Imaginary function
var screenType = getScreenType();

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

我有read about人将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>

Answer 4

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

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

但它只适用于页面加载时没有调整大小..

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

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

4 个答案: