wykryj szerokość okna i zrekompensuj paski przewijania - JavaScript

Question

Jak wykryć szerokość okna użytkownika z JavaScriptem i konto dla paska przewijania? (Potrzebuję szerokości ekranu WEWNĄTRZ paska przewijania). Oto co mam ... to wydaje się działać w wielu przeglądarkach ... oprócz tego, że nie uwzględnia się paski przewijania ..

function browserWidth() { 
    var myWidth = 0; 
    if(typeof(window.innerWidth) == 'number') { 
    //Non-IE 
    myWidth = window.innerWidth; 
    } else if(document.documentElement && document.documentElement.clientWidth) { 
    //IE 6+ in 'standards compliant mode' 
    myWidth = document.documentElement.clientWidth; 
    } else if(document.body && document.body.clientWidth) { 
    //IE 4 compatible 
    myWidth = document.body.clientWidth; 
    } 
    return myWidth; 
} 

jakieś pomysły? Potrzebuję go do pracy we wszystkich przeglądarkach;)

Answer 1

Znajdziesz tu duże podsumowanie właściwości obsługiwanych w przeglądarkach on this page on quirksmode.org.

Najlepiej jest pobrać element na stronie (używając document.body, jeśli jest obsługiwany, lub document.getElementById lub cokolwiek innego), przejdź do łańcucha offsetParent, aby znaleźć najwyższy element, a następnie sprawdź jego element clientWidth i clientHeight.

Answer 2

Porównałbym "wewnętrzną szerokość" do szerokości ciała. Jeśli szerokość ciała> innerwidth, wtedy paski przewijania są obecne.

if (browserWidth() < document.body.offsetWidth) { 
    doSomething(); 
} 

Answer 3

A (znacznie paskudny) obejście jeśli jesteś zainteresowany tylko w szerokości jest stworzenie 1px x 100% div i użyć jej offsetWidth. Działa na IE> = 7, FF, Chrome, Safari i Opera (nie próbowałem IE6, ponieważ pracujemy nad Twoim szczęściem, to działa na wszystko, żeby nie skarżyć się w tym momencie o polityce oddawania wiernych-dziwactw). Zawijam div off document.body z atrybutami { position: 'absolute', top: '-1px', left: 0, width: '100%', height: '1px' }, tworząc go za pierwszym razem, gdy jest potrzebny.

Działa, jeśli możesz go znieść.

Answer 4

Wystarczy dodać, że przed window.innerWidth() sprawdzić:

if (typeof(document.body.clientWidth) == 'number') { 
    // newest gen browsers 
    width = document.body.clientWidth; 
    height = document.body.clientHeight; 
} 

Answer 5

Innym rozwiązaniem można spróbować zmienia się trochę CSS tak się dzieje wewnątrz przewijanie strony, zamiast okna przeglądarki robi. W stylu dla ciała dodaj przepełnienie: auto. Teraz element body zawiera pasek przewijania, więc gdy osiągniesz szerokość okna, mierzysz szerokość poza przewijanym pojemnikiem zamiast wewnątrz.

To może wydawać się potencjalnym źródłem dziwactwa i być może problemem związanym z ułatwieniami dostępu, więc jeśli zamierzasz korzystać z niego w szerokim zakresie, możesz przetestować go bardzo ostrożnie.

Answer 6

To jest to, co zrobiłem - tylko pół roku na naukę JavaScript, więc może to być złe rozwiązanie. Po pierwsze, stworzyliśmy przejrzystą kwadratowego obrazu (10px x 10px), ale można również utworzyć nieprzejrzystego obrazu i dodać do swojej JavaScript jako
document.getElementById('getDimensions').style.visibility = "hidden";

HTML:

<img id="getDimensions" src="images/aSmallBox.png" alt="A small transparent image 
meant to determine the dimensions of the viewport" width="10px" height="10px"/> 

JavaScript:

//Inside function called by window.onload event handler (could go in CSS file, but 
//better to keep it with other related code in JS file) 
document.getElementById('getDimensions').style.position = "fixed"; 
document.getElementById('getDimensions').style.bottom = "0px"; 
document.getElementById('getDimensions').style.right = "0px"; 

//Everything below inside function called by window.onresize event handler 
var baseWidthCalculation = document.getElementById('getDimensions').offsetLeft; 
var baseHeightCalculation = document.getElementById('getDimensions').offsetTop; 
    //Account for the dimensions of the square img element (10x10) 
var viewportWidth = baseWidthCalculation + 10; 
var viewportHeight = baseHeightCalculation + 10; 

Answer 7

To jest bardziej wydajna wersja pomysłu opublikowanego tutaj przez Tima Salai (ev Jeśli dopiero zaczynasz, to było wspaniałe umieszczenie elementu w prawym dolnym rogu.).

var getDimensions = document.createElement("div"); 
getDimensions.setAttribute("style", 
      "visibility:hidden;position:fixed;bottom:0px;right:0px;"); 
document.getElementsByTagName("body")[0].appendChild(getDimensions); 
var viewportWidth = getDimensions.offsetLeft; 
var viewportHeight = getDimensions.offsetTop; 

I tu jest modułowym wersja

var PageDimensions = function(){ 
var Width; 
var Height;  

function pagedimensionsCtor(){ 
    var getDimensions = document.createElement("div"); 
    getDimensions.setAttribute("style" , 
     "visibility:hidden;position:fixed;bottom:0px;right:0px;"); 
    document.getElementsByTagName("body")[0].appendChild(getDimensions); 
    Width = getDimensions.offsetLeft; 
    Height = getDimensions.offsetTop; 
    getDimensions.parentNode.removeChild(getDimensions); 
} 
pagedimensionsCtor(); 

function Reset(){ 
    pagedimensionsCtor(); 
}  

function GetPageHeight(){ 
    return Height; 
} 

function GetPageWidth(){ 
    return Width; 
} 

return{ 
    Reset: Reset, 
    GetPageHeight: GetPageHeight, 
    GetPageWidth: GetPageWidth 
}; 
} 

pomocą modułowa wersja: funkcja

var page = new PageDimensions(); 
console.log("viewportWidth: " + page.GetPageWidth() + " viewportHeight: " + page.GetPageHeight()); 

Bonus:

page.Reset();//just in case you think your dimensions have changed