7

我正在使用以下两段 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
}

它们的问题是后者在宽度 = 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
4

5 回答 5

8

不久前我不得不解决同样的问题，到目前为止，我发现的最正确的解决方案是使用媒体查询将实际的窗口大小传递给 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...
}

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

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

于 2013-08-30T07:43:40.637 回答
6

您将在 quirksmode.org 的此页面上找到哪些浏览器支持哪些属性的概要。

您最好的选择可能是抓取页面中的一个元素（在支持的情况下使用 document.body 或 document.getElementById 或其他），遍历其 offsetParent 链以找到最顶层的元素，然后检查该元素的 clientWidth 和 clientHeight。

内部宽度文档

innerWidth()表示此方法不适用于window和document对象；对于这些，使用 .width()

尝试

如何获取浏览器的滚动条大小？

来自亚历山大·戈麦斯的博客 

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
}
于 2013-08-30T07:24:35.447 回答
1

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

function getWidth(){
   return ((window.innerWidth > 0) ? window.innerWidth : screen.width);
}
于 2016-09-21T20:51:52.353 回答
0

如果您使用的是 Bootstrap > 3，那么我会给您一些建议。

.containerBootstrap在其 Css 和预定义中附带了类。它随着@media 查询而改变。所以我的工作代码示例如下。

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
   }

}

于 2014-08-30T04:22:34.883 回答
0

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

var width = window.outerWidth;

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

于 2015-01-07T11:10:36.137 回答