Gibt es ein jQuery-Plugin oder eine Möglichkeit, mithilfe von reinem JavaScript die Browsergröße zu ermitteln?

Ich würde es vorziehen, wenn die Ergebnisse "live" wären. Wenn sich also die Breite oder Höhe ändert, würden sich auch die Ergebnisse ändern.

20
user1658756 8 Okt. 2012 im 15:53

6 Antworten

Beste Antwort

JavaScript

function jsUpdateSize(){
    // Get the dimensions of the viewport
    var width = window.innerWidth ||
                document.documentElement.clientWidth ||
                document.body.clientWidth;
    var height = window.innerHeight ||
                 document.documentElement.clientHeight ||
                 document.body.clientHeight;

    document.getElementById('jsWidth').innerHTML = width;  // Display the width
    document.getElementById('jsHeight').innerHTML = height;// Display the height
};
window.onload = jsUpdateSize;       // When the page first loads
window.onresize = jsUpdateSize;     // When the browser changes size

jQuery

function jqUpdateSize(){
    // Get the dimensions of the viewport
    var width = $(window).width();
    var height = $(window).height();

    $('#jqWidth').html(width);      // Display the width
    $('#jqHeight').html(height);    // Display the height
};
$(document).ready(jqUpdateSize);    // When the page first loads
$(window).resize(jqUpdateSize);     // When the browser changes size

jsfiddle Demo

Bearbeiten: Der JavaScript-Code wurde aktualisiert, um IE8 und früher zu unterstützen.

59
Matt Coughlin 9 Okt. 2012 im 01:19

Dies sollte den sichtbaren Bereich zurückgeben:

document.body.offsetWidth
document.body.offsetHeight

Ich denke das ist immer gleich der Browsergröße?

3
Marcus Johansson 8 Okt. 2012 im 11:55

Meinst du so etwas window.innerHeight; window.innerWidth $(window).height(); $(window).width()

0
Anton 8 Okt. 2012 im 11:56

Sie können verwenden

function onresize (){
   var h = $(window).height(), w= $(window).width();
   $('#resultboxid').html('height= ' + h + ' width: ' w);
}
 $(window).resize(onresize ); 

 onresize ();// first time;

Html:

<span id=resultboxid></span>
6
Anoop 8 Okt. 2012 im 12:34

Verwenden Sie die Variablen width und height an einer beliebigen Stelle. Wenn sich die Größe des Browsers ändert, ändert sich auch der Variablenwert.

$(window).resize(function() {
    width = $(this).width());
    height = $(this).height());
});
2
Ritesh Chandora 22 Apr. 2013 im 06:02

Sie können versuchen, den Ereignis-Listener bei Größenänderung wie hinzuzufügen

window.addEventListener('resize',CheckBrowserSize,false);
function CheckBrowserSize() 
{
    var ResX= document.body.offsetHeight;
    var ResY= document.body.offsetWidth;
}
0
Milind Thakkar 9 Okt. 2012 im 04:40