Question

我正在使用以下两段CSS和JS代码：

@media (max-width: 720px) {
    // a code to make arrows in a carousel disappear
}

if(jQuery(window).width() <= 720){
    // a code to make arrows in the carousel stop working
}

它们的问题是后者在width = 738px而不是720px上执行。我怀疑这是因为浏览器的垂直滚动条在Chrome中的宽度等于18px。

有没有办法统一这个？我希望这些操作在所有浏览器中同时发生，无论滚动条的宽度如何。

测试（当浏览器是@ 720px并且CSS已经执行时）：

jQuery(document).innerWidth() = 703
jQuery(window).innerWidth() = 703
jQuery(document).width() = 703
jQuery(window).width() = 703
jQuery('body').width() = 703
jQuery('html').width() = 703

Answer 1

我不得不在不久前解决同样的问题，到目前为止，我找到的最正确的解决方案是使用媒体查询将实际窗口大小传递给Javascript。您必须按照以下步骤操作：

向页面添加隐藏元素
使用媒体查询来更改该元素的max-width属性
通过Javascript读回该元素的max-width属性。

例如，将以下元素添加到您的页面：

<div id="currentMedia"></div>

然后编写以下CSS规则：

#currentMedia {
    display: none;
}

@media (max-width: 720px) {
    /* Make arrows in the carousel disappear... */

    #currentMedia {
        max-width: 720px;
    }
}

然后，从Javascript方面，您可以写：

if (parseInt(jQuery("#currentMedia").css("max-width"), 10) <= 720) {
    // Make arrows in the carousel stop working...
}

无论滚动条大小如何，它都是准确的，因为该值来自触发轮播消失的相同媒体查询。

我在最近的所有主流浏览器上都测试了这个解决方案，它给出了正确的结果。

Answer 2

您可以找到哪些浏览器on this page on quirksmode.org支持的属性的大摘要。

你最好的选择可能是抓取页面中的元素（使用document.body支持，或者document.getElementById或其他），遍历其offsetParent链以找到最顶层的元素，然后检查该元素的clientWidth和clientHeight。 / p>

innerWidth文档

innerWidth()表示此方法不适用于window和document个对象;对于这些，请使用.width（）

试

How can I get the browser's scrollbar sizes?

来自Alexandre Gomes Blog

function getScrollBarWidth () {
  var inner = document.createElement('p');
  inner.style.width = "100%";
  inner.style.height = "200px";

  var outer = document.createElement('div');
  outer.style.position = "absolute";
  outer.style.top = "0px";
  outer.style.left = "0px";
  outer.style.visibility = "hidden";
  outer.style.width = "200px";
  outer.style.height = "150px";
  outer.style.overflow = "hidden";
  outer.appendChild (inner);

  document.body.appendChild (outer);
  var w1 = inner.offsetWidth;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetWidth;
  if (w1 == w2) w2 = outer.clientWidth;

  document.body.removeChild (outer);

  return (w1 - w2);
};

代码

if(jQuery(window).width()-getScrollBarWidth(); <= 720){
    // a code to make arrows in the carousel stop working
}

Answer 3

如果您使用的是Bootstrap＆gt; 3然后我会建议你。

Bootstrap在其Css中附带.container类并已预定义。它改变了@media queries。所以我的工作代码示例如下。

function detectWidth(){
   var width = $('.container').eq(0).outerWidth()   ;
   console.log(width);
   if(width<750){
     // do something for XS element
   }else if(width>=750 && width<970){
     // do something for SM element
   }else if(width>=970 && width<1170){
      // do something for MD element
   }else{
    // do something for LG element
   }

}

Answer 4

我意识到这是一个老线程，但我认为它仍然可以从这个答案中受益。

var width = window.outerWidth;

这将为您提供窗口的宽度，包括滚动条，这是媒体查询使用的内容，我相信。

Answer 5

有点过时的帖子，但我找到了这个解决方案

function getWidth(){
   return ((window.innerWidth > 0) ? window.innerWidth : screen.width);
}

jQuery窗口宽度不等于CSS的窗口宽度

5 个答案: