Kaydırma çubuğu (eksi) olmadan ekran genişliği nasıl elde edilir?

Bir öğem var ve genişliğine (!) Dikey kaydırma çubuğu olmadan ihtiyacım var.

Firebug bana vücut genişliğinin 1280 piksel olduğunu söylüyor.

Bunlardan herhangi biri Firefox'ta iyi çalışır:

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

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

Hepsi aradığım değer olan 1263px döndürüyor .

Ancak diğer tüm tarayıcılar bana 1280px veriyor .

Dikey kaydırma çubuğu (!) Olmadan tam ekran genişliği elde etmenin çapraz tarayıcı yolu var mı?

.prop("clientWidth") ve .prop("scrollWidth")

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

içinde JavaScript :

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

_{Not:scrollWidth Güvenilir bir şekilde kullanmak için öğenizin yatay olarak taşmaması gerektiğini unutmayın}

jsBin demosu

Ayrıca kullanabilirsiniz, .innerWidth()ancak bu yalnızca bodyöğede çalışacaktır

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

Vanilya javascript'i sadece yazarak kullanabilirsiniz:

var width = el.clientWidth;

Bunu, belgenin genişliğini aşağıdaki gibi almak için de kullanabilirsiniz:

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

Kaynak: MDN

Kaydırma çubuğu dahil olmak üzere tam pencerenin genişliğini aşağıdaki şekilde de alabilirsiniz:

var fullWidth = window.innerWidth;

Ancak bu, tüm tarayıcılar tarafından desteklenmez, bu nedenle bir yedek olarak, docWidthyukarıdaki gibi kullanmak ve kaydırma çubuğu genişliğini eklemek isteyebilirsiniz .

Kaynak: MDN

$elementBir jQueryöğe olduğunu varsayan bazı örnekler :

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

Bunu dene :

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

Bu kodu kullanarak ekran genişliğini kaydırma çubuğu ile veya olmadan elde edebilirsiniz. Burada, taşma değerini değiştirdim bodyve kaydırma çubuğu olan ve olmayan genişliği elde ettim .

Kaydırma çubukları olmadan doğru genişliği ve yüksekliği elde etmenin en güvenli yeri HTML öğesidir. Bunu dene:

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

Tarayıcı desteği oldukça iyi, IE 9 ve üstü bunu destekliyor. ESKİ IE için, burada bahsedilen birçok yedekten birini kullanın.

Benzer bir problem yaşadım ve bunu yapmak width:100%;benim için çözüldü. Bu soruya bir cevap denedikten sonra ve <iframe>bu javascript ölçüm araçlarının bazı karmaşık fonksiyonlar kullanmadan bu javascript ölçüm araçlarını yanlış yapacağının farkına vardıktan sonra bu çözüme geldim . % 100 yapmak, bunu bir iframe'de halletmenin basit bir yoludur. Hangi HTML öğelerini işlediğinizden emin olmadığım için sorununuz hakkında bir şey bilmiyorum.

Bu çözümlerin hiçbiri benim için işe yaramadı, ancak kaydırma çubuğunun genişliğini ve genişliğini çıkararak düzeltmeyi başardım . Bunun tarayıcılar arası ne kadar uyumlu olduğundan emin değilim.

İşte kullandığım şey

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