如何在 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");
    }
});

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

How to get exact media query value in javascript?

javascript

scrollbar

media-queries