$(window).width()与媒体查询不同

时间:2013-10-10 09:24:29

标签: jquery css twitter-bootstrap media-queries

我正在项目中使用Twitter Bootstrap。除了默认的bootstrap样式,我还添加了一些自己的

//My styles
@media (max-width: 767px)
{
    //CSS here
}

当视口的宽度小于767px时,我也使用jQuery来更改页面上某些元素的顺序。

$(document).load($(window).bind("resize", checkPosition));

function checkPosition()
{
    if($(window).width() < 767)
    {
        $("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar"));
    } else {
        $("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar"));
    }
}

我遇到的问题是$(window).width()计算的宽度和CSS计算的宽度似乎不一样。当$(window).width()返回767时,css会将视口宽度计算为751,因此似乎有16px不同。

有谁知道造成这种情况的原因以及如何解决问题?人们已经建议不考虑滚动条的宽度,使用$(window).innerWidth() < 751是可行的方法。但理想情况下,我想找到一个计算滚动条宽度的解决方案,这与我的媒体查询一致(例如,两个条件都在检查值767)。因为当然并非所有浏览器的滚动条宽度都是16px?

18 个答案:

答案 0 :(得分:274)

如果您不必支持IE9,则可以使用window.matchMedia()MDN documentation)。

function checkPosition() {
    if (window.matchMedia('(max-width: 767px)').matches) {
        //...
    } else {
        //...
    }
}

window.matchMedia与CSS媒体查询完全一致,浏览器支持非常好:http://caniuse.com/#feat=matchmedia

UPDATE:

如果您必须支持更多浏览器,则可以使用Modernizr's mq method,它支持所有了解CSS中媒体查询的浏览器。

if (Modernizr.mq('(max-width: 767px)')) {
    //...
} else {
    //...
}

答案 1 :(得分:166)

检查媒体查询更改的CSS规则。这保证始终有效。

http://www.fourfront.us/blog/jquery-window-width-and-media-queries

<强> HTML:

<body>
    ...
    <div id="mobile-indicator"></div>
</body>

<强>使用Javascript:

function isMobileWidth() {
    return $('#mobile-indicator').is(':visible');
}

<强> CSS:

#mobile-indicator {
    display: none;
}

@media (max-width: 767px) {
    #mobile-indicator {
        display: block;
    }
}

答案 2 :(得分:32)

可能是由于scrollbar,使用innerWidth代替width

if($(window).innerWidth() <= 751) {
   $("#body-container .main-content").remove()
                                .insertBefore($("#body-container .left-sidebar"));
} else {
   $("#body-container .main-content").remove()
                                .insertAfter($("#body-container .left-sidebar"));
}

您也可以获得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' ] };
}

以上代码 Source

答案 3 :(得分:9)

是的,这是由滚动条引起的。正确答案来源:enter link description here

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' ] };
}

答案 4 :(得分:5)

这可能是一种更好的做法,不是对文档的宽度进行JS范围,而是通过css @media查询进行某种更改。使用此方法,您可以确保JQuery函数和css更改同时发生。

<强>的CSS:

#isthin {
    display: inline-block;
    content: '';
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media only screen and (max-width: 990px) {
    #isthin {
        display: none;
    }
}

<强> jquery的:

$(window).ready(function(){
    isntMobile = $('#isthin').is(":visible");
    ...
});

$(window).resize(function(){
    isntMobile = $('#isthin').is(":visible");
    ...
});

答案 5 :(得分:4)

使用

  

window.innerWidth

这解决了我的问题

答案 6 :(得分:3)

我最近遇到了同样的问题 - 也是Bootstrap 3。

$ .width()和$ .innerWidth()都不适合你。

我提出的最佳解决方案 - 专为BS3量身定制 -
检查.container元素的宽度。

您可能知道.container元素的工作原理,
它是唯一能够为您提供BS css规则设置的当前宽度的元素。

所以它就像

bsContainerWidth = $("body").find('.container').width()
if (bsContainerWidth <= 768)
    console.log("mobile");
else if (bsContainerWidth <= 950)
    console.log("small");
else if (bsContainerWidth <= 1170)
    console.log("medium");
else
    console.log("large");

答案 7 :(得分:3)

这是前面提到的方法的替代方法,它依赖于通过CSS更改内容并通过Javascript读取它。此方法不需要window.matchMedia或Modernizr。它也不需要额外的HTML元素。它的工作原理是使用HTML伪元素来“存储”断点信息:

body:after {
  visibility: hidden;
  height: 0;
  font-size: 0;
}

@media (min-width: 20em) {
  body:after {
    content: "mobile";
  }
}

@media (min-width: 48em) {
  body:after {
    content: "tablet";
  }
}

@media (min-width: 64em) {
  body:after {
    content: "desktop";
  }
}

我以body为例,您可以使用任何HTML元素。您可以将任何所需的字符串或数字添加到伪元素的content中。不必是“移动”等等。

现在我们可以通过以下方式从Javascript中读取此信息:

var breakpoint = window.getComputedStyle(document.querySelector('body'), ':after').getPropertyValue('content').replace(/"/g,'');

if (breakpoint === 'mobile') {
    doSomething();
}

这样我们总能确定断点信息是正确的,因为它直接来自CSS,我们不必为通过Javascript获得正确的屏幕宽度而烦恼。

答案 8 :(得分:2)

Javascript提供了多种方法来检查视口宽度。正如您所注意到的,innerWidth不包含工具栏宽度,工具栏宽度因系统而异。还有 outerWidth 选项,其中包括工具栏宽度。 Mozilla Javascript API州:

  

Window.outerWidth获取浏览器窗口外部的宽度。   它表示整个浏览器窗口的宽度,包括侧边栏   (如果展开),窗口镶边和窗口调整边框/句柄大小。

javascript的状态使得每个平台上的每个浏览器都不能依赖于outerWidth的特定含义。

outerWidthnot well supported on older mobile browsers,虽然它受到主要桌面浏览器和大多数较新智能手机浏览器的支持。

正如ausi指出的那样,matchMedia将是一个很好的选择,因为CSS更好地标准化(matchMedia使用JS来读取CSS检测到的视口值)。但即使使用公认的标准,仍然存在忽略它们的延迟浏览器(在这种情况下IE <10,这使得matchMedia至少在XP死之前不是很有用)。

摘要中,如果您仅针对桌面浏览器和较新的移动浏览器进行开发,则outerWidth应使用some caveats为您提供所需内容。

答案 9 :(得分:1)

这是处理媒体查询的一个较少参与的技巧。跨浏览器支持有点限制,因为它不支持移动IE。

     if (window.matchMedia('(max-width: 694px)').matches)
    {
        //do desired changes
    }

有关详细信息,请参阅Mozilla documentation

答案 10 :(得分:0)

始终有效且与CSS媒体查询同步的解​​决方法。

将div添加到正文

<body>
    ...
    <div class='check-media'></div>
    ...
</body>

添加样式并通过输入特定媒体查询来更改它们

.check-media{
    display:none;
    width:0;
}
@media screen and (max-width: 768px) {
    .check-media{
         width:768px;
    }
    ...
}

然后在JS检查样式中,您将通过进入媒体查询来更改

if($('.check-media').width() == 768){
    console.log('You are in (max-width: 768px)');
}else{
    console.log('You are out of (max-width: 768px)');
}

因此,通常您可以通过输入特定媒体查询来检查正在更改的任何样式。

答案 11 :(得分:0)

如果你想每 1 秒检查一次设备中的屏幕宽度,你可以这样做

 setInterval(function() {
        if (window.matchMedia('(max-width: 767px)').matches) {
            alert('here')
        } else {
            alert('i am ')
        }
    }, 1000);

答案 12 :(得分:0)

我做什么;

<body>
<script>
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
var aWidth=getWidth();
</script>
...

然后在任何地方调用aWidth变量。

您需要将getWidth()放在文档正文中,以确保计算滚动条的宽度,否则从getWidth()中减去浏览器的滚动条宽度。

答案 13 :(得分:0)

尝试

getData(){
    if(window.innerWidth <= 768) {
      alert('mobile view')
      return;
    }

   //else function will work

    let body= {
      "key" : 'keyValue'
    }
    this.dataService.getData(body).subscribe(
      (data: any) => {
        this.myData = data
      }
    )
}

答案 14 :(得分:0)

if(window.matchMedia('(max-width: 768px)').matches)
    {
        $(".article-item").text(function(i, text) {

            if (text.length >= 150) {
                text = text.substring(0, 250);
                var lastIndex = text.lastIndexOf(" ");     
                text = text.substring(0, lastIndex) + '...'; 
            }

            $(this).text(text);

        });

    }

答案 15 :(得分:0)

最佳的跨浏览器解决方案是使用Modernizr.mq

链接: https://modernizr.com/docs/#mq

Modernizr.mq允许您以编程方式检查当前浏览器窗口状态是否与媒体查询匹配。

var query = Modernizr.mq('(min-width: 900px)');
if (query) {
   // the browser window is larger than 900px
}

注意浏览器不支持媒体查询(例如旧IE)mq将始终返回false。

答案 16 :(得分:-1)

实现光滑滑块并根据分辨率(jQuery)在块中显示不同数量的幻灯片

   if(window.matchMedia('(max-width: 768px)').matches) {
      $('.view-id-hot_products .view-content').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
        dots: true,
      });
    }

    if(window.matchMedia('(max-width: 1024px)').matches) {
      $('.view-id-hot_products .view-content').slick({
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 4,
        dots: true,
      });
    }

答案 17 :(得分:-2)

试试这个

if (document.documentElement.clientWidth < 767) {
   // scripts
}

如需更多参考,请点击 here