如何在javascript中获取确切的媒体查询值？

Question

我使用了$(window).width()和$(window).outerWidth()，但两者都会忽略滚动条。因此，如果滚动条的宽度为15px，则当媒体查询为770px时，$(window).width()和$(window).outerWidth()将为755px。

Answer 1

这是因为CSS正在使用设备宽度，而JS正在使用文档宽度。

这里有一个获取视口宽度的js函数：

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

Answer 2

<强> jsBin demo

非常支持，您可以使用matchMedia ^Docs

var mediaQ770 = window.matchMedia('all and (max-width: 770px)');

mediaQ770.addListener(function(ev) {
    if(ev.matches) {
        console.log("<=770");
    } else {
        console.log(">770");
    }
});