如何在没有（减号）滚动条的情况下获取屏幕宽度？

我有一个元素，需要它的宽度没有垂直滚动条。

Firebug告诉我机身宽度为1280px。

这些方法在Firefox中都可以正常工作：

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

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

它们都返回1263px，这是我正在寻找的值。

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

有没有跨浏览器的方法来获得没有（！）垂直滚动条的全屏宽度？

.prop("clientWidth") 和 .prop("scrollWidth")

var actualInnerWidth = $("body").prop("clientWidth"); // El. width minus scrollbar width
var actualInnerWidth = $("body").prop("scrollWidth"); // El. width minus scrollbar width

在JavaScript中：

var actualInnerWidth = document.body.clientWidth;     // El. width minus scrollbar width
var actualInnerWidth = document.body.scrollWidth;     // El. width minus scrollbar width

_{PS：请注意，要scrollWidth可靠使用，您的元素不应水平溢出}

jsBin演示

您也可以使用，.innerWidth()但这仅适用于body元素

var innerWidth = $('body').innerWidth(); // Width PX minus scrollbar 

您可以通过简单的编写来使用香草javascript：

var width = el.clientWidth;

您还可以使用它来获取文档的宽度，如下所示：

var docWidth = document.documentElement.clientWidth || document.body.clientWidth;

资料来源：MDN

您还可以获取整个窗口的宽度，包括滚动条，如下所示：

var fullWidth = window.innerWidth;

但是，并非所有浏览器都支持此功能，因此，作为一种后备方法，您可能希望docWidth按上述方式使用，并增加滚动条的width。

资料来源：MDN

以下是一些假定$element为jQuery元素的示例：

// Element width including overflow (scrollbar)
$element[0].offsetWidth; // 1280 in your case

// Element width excluding overflow (scrollbar)
$element[0].clientWidth; // 1280 - scrollbarWidth

// Scrollbar width
$element[0].offsetWidth - $element[0].clientWidth; // 0 if no scrollbar

试试这个 ：

$('body, html').css('overflow', 'hidden');
var screenWidth1 = $(window).width();
$('body, html').css('overflow', 'visible');
var screenWidth2 = $(window).width();
alert(screenWidth1); // Gives the screenwith without scrollbar
alert(screenWidth2); // Gives the screenwith including scrollbar

使用此代码，可以通过使用和不使用滚动条来获取屏幕宽度。在这里，我更改了的溢出值，body并使用和不使用滚动条来获取宽度。

在没有滚动条的情况下获得正确宽度和高度的最安全的地方是HTML元素。试试这个：

var width = document.documentElement.clientWidth
var height = document.documentElement.clientHeight

浏览器支持相当不错，IE 9及更高版本对此提供了支持。对于OLD IE，请使用此处提到的众多后备版本之一。

我遇到了类似的问题，并且width:100%;确实为我解决了。在尝试回答这个问题并意识到的本质<iframe>会导致这些javascript测量工具不使用某些复杂功能而变得不准确之后，我来到了该解决方案。进行100％操作是在iframe中解决此问题的简单方法。我不确定您正在处理哪些HTML元素，因此不知道您的问题。

这些解决方案都不适合我，但是我能够通过采用宽度并减去滚动条的宽度来修复它。我不确定这与跨浏览器的兼容性如何。

这是我用的

function windowSizes(){
    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']
    };  
}

$(window).on('resize', function () {
    console.log( windowSizes().width,windowSizes().height );
});