Jak znaleźć za pomocą javascript maksymalną szerokość i szerokość okna przeglądarki użytkownika?

Question

Szukam sposobu, używając javascript, aby znaleźć szerokość i wysokość okna przeglądarki użytkownika, ale chcę również znaleźć maksymalne rozmiary okna, więc jeśli użytkownik sprawi, że okno będzie mniejsze lub większe niektóre elementy zmieniają automatyczne położenie lub rozmiar, takie jak facebook chat. Jakieś sugestie ?

Answer 1

Można użyć window.innerWidth i window.innerHeight

Można ustawić dowolny element dom w stosunku do okna za pomocą pozycji css „stałe” lub bezwzględny, tak aby w oknie zmienić rozmiar będzie przestawić się.

Można użyć window.onresize słuchać zdarzenie okno Resize

jQuery równoważne

$(window).width(); $(window).height() i $(window).resize(function(){});

Answer 2

Maksymalna szerokość rozmiar przeglądarka będzie szerokość i wysokość ekranu:

screen.height; 
screen.width; 

Ale ja użyłbym zapytań o media CSS do tego, co próbujesz zrobić:

http://css-tricks.com/css-media-queries/

Coś takiego może sprawić, że strona czarny jeśli okno jest mniejsze niż 500px szerokości:

@media only screen and (max-width: 500px) { 
    body { 
    background: #000; 
    } 
} 

Aktualizacja:

Aha, i będziemy chcieli PolyFill dla starsze przeglądarki, które nie obsługują zapytań o media:

https://github.com/scottjehl/Respond

Dostaniesz zapytania o media aż do IE6!

Answer 3

Jeśli można użyć jQuery, to dość łatwy do skonfigurowania słuchacza w sposób cross-browser:

$(window).resize(function() { 
    alert($(window).width()) //window width 
    alert($(window).height()) //window height 
}).trigger("resize") //to ensure that you do whatever you're going to do when the window is first loaded; 

Answer 4

Maksymalna wysokość okna jest

window.screen.availHeight - (window.outerHeight - window.innerHeight)