Jak uzyskać szerokość ekranu bez paska przewijania (minus)?

Mam element i potrzebuję jego szerokości bez (!) Pionowego paska przewijania.

Firebug mówi mi, że szerokość ciała to 1280px.

Każda z tych opcji działa dobrze w przeglądarce Firefox:

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

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

Wszystkie zwracają 1263px , czyli wartość, której szukam.

Jednak wszystkie inne przeglądarki dają mi 1280px .

Czy istnieje sposób na uzyskanie szerokości pełnego ekranu bez (!) Pionowego paska przewijania?

.prop("clientWidth") i .prop("scrollWidth")

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

w JavaScript :

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

_{PS: Pamiętaj, że aby używać scrollWidthniezawodnie, element nie powinien przepełniać się w poziomie}

jsBin demo

Możesz również użyć, .innerWidth()ale to zadziała tylko na bodyelemencie

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

Możesz użyć zwykłego javascript, pisząc po prostu:

var width = el.clientWidth;

Możesz również użyć tego, aby uzyskać szerokość dokumentu w następujący sposób:

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

Źródło: MDN

Możesz również uzyskać szerokość całego okna, w tym paska przewijania, w następujący sposób:

var fullWidth = window.innerWidth;

Jednak nie jest to obsługiwane przez wszystkie przeglądarki, więc jako rozwiązanie zastępcze możesz użyć docWidthpowyższego i dodać szerokość paska przewijania .

Źródło: MDN

Oto kilka przykładów, które zakładają, że $elementjest to jQueryelement:

// 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

Spróbuj tego :

$('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

Możesz uzyskać szerokość ekranu z paskiem przewijania i bez niego, używając tego kodu. Tutaj zmieniłem wartość przepełnienia bodyi otrzymałem szerokość z paskiem przewijania i bez niego.

Najbezpieczniejszym miejscem do uzyskania prawidłowej szerokości i wysokości bez pasków przewijania jest element HTML. Spróbuj tego:

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

Obsługa przeglądarek jest całkiem przyzwoita, a IE 9 i nowsze to obsługują. W przypadku STAREGO IE użyj jednego z wielu wymienionych tutaj rozwiązań zastępczych.

Doświadczyłem podobnego problemu i width:100%;rozwiązałem go za siebie. Doszedłem do tego rozwiązania po wypróbowaniu odpowiedzi na to pytanie i zdaniu sobie sprawy, że sama natura <iframe>narzędzi pomiarowych javascript będzie niedokładna bez użycia jakiejś złożonej funkcji. Wykonanie 100% to prosty sposób na zadbanie o to w elemencie iframe. Nie wiem o Twoim problemie, ponieważ nie jestem pewien, jakimi elementami HTML manipulujesz.

Żadne z tych rozwiązań nie zadziałało, ale udało mi się to naprawić, biorąc szerokość i odejmując szerokość paska przewijania . Nie jestem pewien, jak jest to zgodne z różnymi przeglądarkami.

Oto czego używam

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