相关疑难解决方法(0)

我在一个项目上使用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计算的宽度和CSS计算的宽度似乎不相同.当$(window).width()返回767时,css计算出视口宽度为751,因此似乎有16px不同.

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

我有一个元素,需要它的宽度没有(!)垂直滚动条.

Firebug告诉我身体宽度是1280px.

这些都可以在Firefox中正常工作:

console.log($('.element').outerWidth() );
console.log($('.element').outerWidth(true) );

$detour = $('.child-of-element').offsetParent();
console.log( $detour.innerWidth() );

他们都返回1263px,这是我正在寻找的价值.

但是所有其他浏览器都给我1280px.

是否有跨浏览器的方式来获得没有(!)垂直滚动条的全屏宽度？

我试图获得浏览器窗口宽度$(window).width();.在IE 10上,它确实返回完整的浏览器宽度,包括滚动条.但是,在Firefox和Chrome上,两者都返回值而没有滚动条.

如何将浏览器宽度与滚动条一起包含？因为我需要检测到的宽度与CSS完全相同.

谢谢.