我在这里得到了一个我不太明白的奇怪结果。
在 jQuery 中,我通过以下方式记录窗口宽度:
console.log( $(window).width() );
在我的 CSS 中,我将背景颜色更改为红色:
@media only screen and (min-width: 768px) {
body { background: red!important; }
}
然而,在 Firebug 中,控制台说窗口宽度为 756px 宽,但 CSS 使背景为红色,直到达到最小宽度 768px 时才会发生这种情况。
请参阅此屏幕截图以获取进一步说明:
谁能向我解释为什么背景是红色的并且 CSS 看起来不正确?它实际上是不正确的 jQuery 吗?
另外,它与垂直滚动条有什么关系吗?
最佳答案
你需要检查 width
的 viewport
像,
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' ] };
}
Viewport Source
或者你可以使用 innerWidth() 之类的,
if($(window).innerWidth() <= 751) {
$("body").css('background','red !important'); // background red
} else {
$("body").removeAttr('style'); // remove style attribute
}
如果您不关心 egs 的
IE
,则可以使用 matchmedia,function checkPosition() {
if (window.matchMedia('(max-width: 767px)').matches) {
//...
} else {
//...
}
}
对于所有浏览器,您可以尝试
if (Modernizr.mq('(max-width: 767px)')) {
//...
} else {
//...
}
见 modernizr mq
关于jquery - jQuery 和 CSS 媒体查询之间的窗口宽度不一致,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23243374/