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

Question

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

Firebug 告诉我主体宽度是 1280px。

其中任何一个在 Firefox 中都可以正常工作：

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

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

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

然而，所有其他浏览器都给我1280px。

是否有一种跨浏览器的方法可以在没有（！）垂直滚动条的情况下获得全屏宽度？

Answer 1

.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 

Answer 2

您可以通过简单地编写来使用 vanilla javascript：

var width = el.clientWidth;

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

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

来源： MDN

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

var fullWidth = window.innerWidth;

但是，并非所有浏览器都支持这一点，因此作为后备，您可以想要使用docWidth 如上，并添加 滚动条宽度。

来源：MDN

Answer 3

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

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

浏览器支持相当不错，IE 9 及更高版本都支持此功能。对于旧版 IE，请使用此处提到的众多后备方案之一。

Answer 4

以下是一些假设 $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

Answer 5

试试这个：

$('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 的溢出值并获取有和没有滚动条的宽度。

Answer 6

我遇到了类似的问题，并使用 width:100%; 为我解决了这个问题。在尝试回答这个问题并意识到 的本质将使这些 javascript 测量工具在不使用某些复杂功能的情况下变得不准确后，我得出了这个解决方案。 100% 执行是在 iframe 中处理它的一种简单方法。我不知道你的问题，因为我不确定你正在操作哪些 HTML 元素。

Answer 7

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

Answer 8

我知道这是一个老问题，但建议的答案也不适合我。我在网上找到了以下代码，并在 Chrome、Firefox 和 Safari 中进行了测试，似乎运行良好。

if (window.matchMedia("(max-width: 1339px)").matches) { // do some if matches }

我想我会在这里提到它，以防它对其他人有帮助。

Answer 9

这是我用的

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 );
});