Ermitteln Sie die Größe des Bildschirms, der aktuellen Webseite und des Browserfensters

Wenn Sie mit jQuery, können Sie die Größe des Fensters oder das Dokument mit jQuery-Methoden:

$(window).height();   //returns height of browser viewport
$(document).height(); //returns height of HTML document (same as pageHeight in screenshot)
$(window).width();   //returns width of browser viewport
$(document).width(); //returns width of HTML document (same as pageWidth in screenshot)

Für Bildschirm-Größe, die Sie verwenden können, die screen Objekt in der folgenden Weise:

screen.height;
screen.width;

InformationsquelleAutor der Antwort Ankit Jaiswal

Hier ist ein cross-browser-Lösung mit reinem JavaScript (Quelle):

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

InformationsquelleAutor der Antwort confile

Aber wenn wir darüber sprechen, reagieren Bildschirme und wenn wir wollen, behandeln Sie es mit Hilfe von jQuery aus irgendeinem Grund,

window.innerWidth, window.innerHeight

gibt die korrekte Messung. Auch entfernt es die scroll-bar extra Raum und wir brauchen nicht zu sorgen über die Anpassung, die Leerzeichen 🙂

InformationsquelleAutor der Antwort Aabha Pandey

Können Sie auch das FENSTER in Breite und Höhe, die Vermeidung von browser-Symbolleisten und andere Sachen. Es ist die real nutzbare Fläche im browser-Fenster.

Um dies zu tun, verwenden Sie:
window.innerWidth und window.innerHeight Eigenschaften (siehe doc an w3schools).

In den meisten Fällen wird es der beste Weg sein, im Beispiel für die Anzeige einer perfekt zentriert floating-modalen dialog. Sie ermöglicht die Berechnung von Positionen auf Fenster, egal welche Auflösung, die Ausrichtung oder die Größe der Fenster ist über den browser.

InformationsquelleAutor der Antwort serfer2

Wenn du eine wirklich ultimative Lösung für das Dokument Breite und Höhe (die pageWidth und pageHeight im Bild), möchten Sie vielleicht zu prüfen, mit einem plugin von mir, jQuery.documentSize.

Es hat nur einen Zweck: immer wieder das korrekte Dokument-grösse, auch in Szenarien, wenn jQuery und andere Methoden fail. Trotz seines namens, nicht unbedingt jQuery verwenden – es ist geschrieben in vanilla Javascript und funktioniert auch ohne jQuery auch.

Verwendung:

var w = $.documentWidth(),
    h = $.documentHeight();

für die Globale document. Für andere Dokumente, z.B. in einem eingebetteten iframe die Sie Zugriff haben, übergeben Sie das Dokument als parameter:

var w = $.documentWidth( myIframe.contentDocument ),
    h = $.documentHeight( myIframe.contentDocument );

Update: jetzt für die Fenster-Dimensionen zu

Seit version 1.1.0, jQuery.documentSize übernimmt auch die Maße der Fenster.

Ist notwendig, weil

• $( window ).height() ist buggy in iOS, bis zu dem Punkt des seins nutzlos
• $( window ).width() und $( window ).height() sind unzuverlässig, bei mobile, weil Sie nicht behandeln, die Auswirkungen von mobile Zoomen.

jQuery.documentSize bietet $.windowWidth() und $.windowHeight(), die diese Probleme lösen. Für mehr, bitte schauen Sie sich die Dokumentation.

InformationsquelleAutor der Antwort hashchange

Entwickelte ich eine Bibliothek für die wissen, die echte viewport-Größe für desktops und mobiles Browser, weil viewport-Größen sind inconsistents über Geräte und dürfen sich nicht auf alle Antworten, die post (nach all der Forschung, die ich gemacht) : https://github.com/pyrsmk/W

InformationsquelleAutor der Antwort pyrsmk

Manchmal müssen Sie, um zu sehen, die Breite/Höhe ändert, während die Größe des Fensters und inneren Inhalt.

Für das ich geschrieben habe ein kleines Skript, das fügt einen log-box, die dynamicly überwacht alle Größe und fast sofort aktualisiert.

Fügt es sich um eine gültige HTML mit fester position und sehr hohen z-index, aber klein genug, so können Sie:

• es auf eine tatsächlichen Website
• zum testen nutzen mobile/responsive
  Ansichten

Getestet: Chrome 40, IE11, aber es ist sehr gut möglich, die Arbeit auf anderen/älteren Browsern zu ... 🙂

  function gebID(id){ return document.getElementById(id); }
  function gebTN(tagName, parentEl){ 
     if( typeof parentEl == "undefined" ) var parentEl = document;
     return parentEl.getElementsByTagName(tagName);
  }
  function setStyleToTags(parentEl, tagName, styleString){
    var tags = gebTN(tagName, parentEl);
    for( var i = 0; i<tags.length; i++ ) tags[i].setAttribute('style', styleString);
  }
  function testSizes(){
    gebID( 'screen.Width' ).innerHTML = screen.width;
    gebID( 'screen.Height' ).innerHTML = screen.height;

    gebID( 'window.Width' ).innerHTML = window.innerWidth;
    gebID( 'window.Height' ).innerHTML = window.innerHeight;

    gebID( 'documentElement.Width' ).innerHTML = document.documentElement.clientWidth;
    gebID( 'documentElement.Height' ).innerHTML = document.documentElement.clientHeight;

    gebID( 'body.Width' ).innerHTML = gebTN("body")[0].clientWidth;
    gebID( 'body.Height' ).innerHTML = gebTN("body")[0].clientHeight;  
  }

  var table = document.createElement('table');
  table.innerHTML = 
       "<tr><th>SOURCE</th><th>WIDTH</th><th>x</th><th>HEIGHT</th></tr>"
      +"<tr><td>screen</td><td id='screen.Width' /><td>x</td><td id='screen.Height' /></tr>"
      +"<tr><td>window</td><td id='window.Width' /><td>x</td><td id='window.Height' /></tr>"
      +"<tr><td>document<br>.documentElement</td><td id='documentElement.Width' /><td>x</td><td id='documentElement.Height' /></tr>"
      +"<tr><td>document.body</td><td id='body.Width' /><td>x</td><td id='body.Height' /></tr>"
  ;

  gebTN("body")[0].appendChild( table );

  table.setAttribute(
     'style',
     "border: 2px solid black !important; position: fixed !important;"
     +"left: 50% !important; top: 0px !important; padding:10px !important;"
     +"width: 150px !important; font-size:18px; !important"
     +"white-space: pre !important; font-family: monospace !important;"
     +"z-index: 9999 !important;background: white !important;"
  );
  setStyleToTags(table, "td", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");
  setStyleToTags(table, "th", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");

  table.style.setProperty( 'margin-left', '-'+( table.clientWidth / 2 )+'px' );

  setInterval( testSizes, 200 );

EDIT: Jetzt-Stile werden angewendet, nur um die logger-Tabelle-element - nicht, um alle Tabellen - auch dies ist ein jQuery-frei Lösung 🙂

InformationsquelleAutor der Antwort jave.web

Hier ist meine Lösung.
Zuerst geht es einige utility-Objekt zu arbeiten mit cookie -

/* Simple getter and setter for cookies */
(function(global){
    function setCookie(cname, cvalue, exdays) {
        exdays = typeof exdays === 'undefined' && 365;

        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires="+d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }

    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return undefined;
    }

    global.Cookie = {
        get: getCookie,
        set: setCookie
    };
})(window);

Dann können Sie etwas tun, wie..

/* 
  Detect screen width and height and save it to a cookie.
  We are later using it to resize the images accordingly.
*/
if(
    !Cookie.get('screen_width') ||
    !Cookie.get('screen_height') ||
    Cookie.get('screen_width') != screen.width ||
    Cookie.get('screen_height') != screen.height
  ){
  Cookie.set('screen_width', screen.width);
  Cookie.set('screen_height', screen.height);
  location.reload();
}

Diese Weise können Sie eine serverseitige Sprache, die cookies zu Lesen und die genaue Größe des Bildes, die Benutzer-Bildschirm.

InformationsquelleAutor der Antwort nikksan