Ruft die Größe des Bildschirms, der aktuellen Webseite und des Browserfensters ab

Dies hat alles, was Sie wissen müssen: Ansichtsfenster-/Fenstergröße abrufen

aber kurz gesagt:

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;
alert(x + ' × ' + y);

Fiddle

Hier ist eine browserübergreifende Lösung mit reinem JavaScript ( Source ):

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

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

Eine Nicht-jQuery-Methode zum Abrufen der verfügbaren Bildschirmgröße. window.screen.width/height wurde bereits erstellt, aber aus Gründen des reaktionsschnellen Webdesigns und der Vollständigkeit halte ich es für sinnvoll, diese Attribute zu erwähnen:

alert(window.screen.availWidth);
alert(window.screen.availHeight);

http://www.quirksmode.org/dom/w3c_cssom.html#t1 :

availWidth und availHeight - Die verfügbare Breite und Höhe auf dem Bildschirm (außer OS Taskleisten und so).

Aber wenn wir über reaktionsfähige Bildschirme sprechen und aus irgendeinem Grund mit jQuery damit umgehen wollen,

window.innerWidth, window.innerHeight

gibt das richtige Maß. Sogar der zusätzliche Platz der Bildlaufleiste wird entfernt, und wir müssen uns nicht darum kümmern, diesen Platz anzupassen :)

So überprüfen Sie die Höhe und Breite Ihrer aktuell geladenen Seite einer Website mit "Konsole" oder nach dem Klicken auf "Überprüfen" .

Schritt 1 : Klicken Sie mit der rechten Maustaste auf "Inspizieren" und dann auf "Konsole".

Schritt 2 : Stellen Sie sicher, dass sich Ihr Browser-Bildschirm nicht im Modus "Maximieren" befindet. Befindet sich der Browser-Bildschirm im Modus "Maximieren", müssen Sie zuerst auf die Schaltfläche "Maximieren" (rechts oder links oben) klicken und die Maximierung aufheben.

Schritt 3 : Schreiben Sie nun Folgendes nach dem Größer-als-Zeichen ('>'), d. h.

       > window.innerWidth
            output : your present window width in px (say 749)

       > window.innerHeight
            output : your present window height in px (say 359)

Sie können auch die WINDOW-Breite und -Höhe abrufen, ohne Browser-Symbolleisten und anderes. Dies ist der tatsächlich nutzbare Bereich im Browserfenster .

Verwenden Sie dazu die folgenden Eigenschaften: window.innerWidth und window.innerHeight ( siehe doc bei w3schools ).

In den meisten Fällen ist es beispielsweise die beste Möglichkeit, ein perfekt zentriertes schwebendes modales Dialogfeld anzuzeigen. Damit können Sie Positionen im Fenster berechnen, unabhängig von der Auflösungsorientierung oder Fenstergröße, die der Browser verwendet.

function wndsize(){
  var w = 0;var h = 0;
  //IE
  if(!window.innerWidth){
    if(!(document.documentElement.clientWidth == 0)){
      //strict mode
      w = document.documentElement.clientWidth;h = document.documentElement.clientHeight;
    } else{
      //quirks mode
      w = document.body.clientWidth;h = document.body.clientHeight;
    }
  } else {
    //w3c
    w = window.innerWidth;h = window.innerHeight;
  }
  return {width:w,height:h};
}
function wndcent(){
  var hWnd = (arguments[0] != null) ? arguments[0] : {width:0,height:0};
  var _x = 0;var _y = 0;var offsetX = 0;var offsetY = 0;
  //IE
  if(!window.pageYOffset){
    //strict mode
    if(!(document.documentElement.scrollTop == 0)){offsetY = document.documentElement.scrollTop;offsetX = document.documentElement.scrollLeft;}
    //quirks mode
    else{offsetY = document.body.scrollTop;offsetX = document.body.scrollLeft;}}
    //w3c
    else{offsetX = window.pageXOffset;offsetY = window.pageYOffset;}_x = ((wndsize().width-hWnd.width)/2)+offsetX;_y = ((wndsize().height-hWnd.height)/2)+offsetY;
    return{x:_x,y:_y};
}
var center = wndcent({width:350,height:350});
document.write(center.x+';<br>');
document.write(center.y+';<br>');
document.write('<DIV align="center" id="rich_ad" style="Z-INDEX: 10; left:'+center.x+'px;WIDTH: 350px; POSITION: absolute; TOP: '+center.y+'px; HEIGHT: 350px"><!--К сожалению, у Вас не установлен flash плеер.--></div>');

Wenn Sie eine wirklich kugelsichere Lösung für die Dokumentenbreite und -höhe benötigen (pageWidth und pageHeight im Bild), sollten Sie ein Plugin von mir verwenden, jQuery.documentSize .

Es hat nur einen Zweck: immer die richtige Dokumentgröße zurückzugeben, auch in Szenarien, in denen jQuery und andere Methoden fail . Trotz des Namens müssen Sie nicht unbedingt jQuery verwenden - es ist in Vanilla Javascript geschrieben und funktioniert auch ohne jQuery .

Verwendungszweck:

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

für das globale document. Für andere Dokumente, z. Übergeben Sie in einem eingebetteten Iframe, auf den Sie Zugriff haben, das Dokument als Parameter:

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

Update: jetzt auch für Fensterabmessungen

Seit Version 1.1.0 verarbeitet jQuery.documentSize auch Fensterabmessungen.

Das ist notwendig, weil

• $( window ).height() ist fehlerhaft in iOS , bis es unbrauchbar wird
• $( window ).width() und $( window ).height() sind auf Mobilgeräten unzuverlässig , da sie die Effekte des mobilen Zoomens nicht verarbeiten.

jQuery.documentSize bietet $.windowWidth() und $.windowHeight(), mit denen diese Probleme behoben werden. Weitere Informationen finden Sie in der Dokumentation .

Ich habe ein kleines Javascript-Lesezeichen geschrieben, mit dem Sie die Größe anzeigen können. Sie können es ganz einfach zu Ihrem Browser hinzufügen. Wenn Sie darauf klicken, wird die Größe in der rechten Ecke Ihres Browserfensters angezeigt.

Hier finden Sie Informationen zur Verwendung eines Bookmarklets https://en.wikipedia.org/wiki/Bookmarklet

Lesezeichen

javascript:(function(){!function(){var i,n,e;return n=function(){var n,e,t;return t="background-color:Azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;",n=i('<div style="'+t+'"></div>'),e=function(){return'<p style="margin:0;">width: '+i(window).width()+" height: "+i(window).height()+"</p>"},n.html(e()),i("body").prepend(n),i(window).resize(function(){n.html(e())})},(i=window.jQuery)?(i=window.jQuery,n()):(e=document.createElement("script"),e.src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js",e.onload=n,document.body.appendChild(e))}()}).call(this);

Ursprünglicher Code

Der Originalcode ist in Kaffee:

(->
  addWindowSize = ()->
    style = 'background-color:Azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;'
    $windowSize = $('<div style="' + style + '"></div>')

    getWindowSize = ->
      '<p style="margin:0;">width: ' + $(window).width() + ' height: ' + $(window).height() + '</p>'

    $windowSize.html getWindowSize()
    $('body').prepend $windowSize
    $(window).resize ->
      $windowSize.html getWindowSize()
      return

  if !($ = window.jQuery)
    # typeof jQuery=='undefined' works too
    script = document.createElement('script')
    script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
    script.onload = addWindowSize
    document.body.appendChild script
  else
    $ = window.jQuery
    addWindowSize()
)()

Grundsätzlich wird dem Code ein kleines Div vorangestellt, das aktualisiert wird, wenn Sie die Größe Ihres Fensters ändern.

In einigen Fällen, die mit dem reaktionsschnellen Layout zusammenhängen, kann $(document).height() falsche Daten zurückgeben, die nur die Höhe des Ansichtsports anzeigen. Wenn beispielsweise ein # div-Wrapper eine Höhe von 100% hat, kann dieser #Wrapper um einen Block darin gedehnt werden. Die Höhe entspricht jedoch der Höhe des Ansichtsfensters. In einer solchen Situation könnten Sie verwenden

$('#wrapper').get(0).scrollHeight

Das entspricht der tatsächlichen Größe des Wrappers.

Ich habe eine Bibliothek entwickelt, um die tatsächliche Größe des Ansichtsfensters für Desktops und mobile Browser zu ermitteln, da die Größe des Ansichtsfensters geräteübergreifend unterschiedlich ist und sich nicht auf alle Antworten dieses Beitrags stützen kann (nach all den Untersuchungen, die ich dazu angestellt habe): https : //github.com/pyrsmk/W

Manchmal müssen Sie die Änderungen von Breite/Höhe sehen, während Sie die Größe des Fensters und des inneren Inhalts ändern.

Zu diesem Zweck habe ich ein kleines Skript geschrieben, das ein Protokollfeld hinzufügt, das alle Größenänderungen dynamisch überwacht und fast sofort aktualisiert.

Es fügt einen gültigen HTML-Code mit fester Position und hohem Z-Index hinzu, ist aber klein genug, also Sie können:

• verwenden Sie es auf einer tatsächlichen Site
• verwenden Sie es zum Testen mobil/reaktionsfähig Ansichten

Getestet auf: Chrome 40, IE11, aber es ist durchaus möglich, auch mit anderen/älteren Browsern zu arbeiten ... :)

  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 werden Stile nur auf das Logger-Tabellenelement angewendet - nicht auf alle Tabellen - auch dies ist eine jQuery-freie Lösung :)

Sie können das Objekt Screen verwenden, um dies abzurufen.

Folgendes ist ein Beispiel für die Rückgabe:

Screen {
    availWidth: 1920,
    availHeight: 1040,
    width: 1920,
    height: 1080,
    colorDepth: 24,
    pixelDepth: 24,
    top: 414,
    left: 1920,
    availTop: 414,
    availLeft: 1920
}

Um Ihre Variable screenWidth zu erhalten, verwenden Sie einfach screen.width, genau wie bei screenHeight, verwenden Sie einfach screen.height.

Um die Breite und Höhe Ihres Fensters zu ermitteln, ist dies screen.availWidth bzw. screen.availHeight.

Verwenden Sie für die Variablen pageX und pageYwindow.screenX or Y. Beachten Sie, dass dies vom SEHR LINKS/OBEN IHRES LINKS/OBEN-estEN BILDSCHIRMS stammt . Wenn Sie also zwei Bildschirme mit der Breite 1920 haben, hat ein Fenster mit 500 Pixel links vom rechten Bildschirm den X-Wert 2420 (1920 + 500). screen.width/height zeigt jedoch die Breite oder Höhe des CURRENT-Bildschirms an.

Verwenden Sie jQueries $(window).height() oder $(window).width(), um die Breite und Höhe Ihrer Seite zu ermitteln.

Verwenden Sie bei Verwendung von jQuery erneut $("html").offset().top und $("html").offset().left für Ihre pageX und pageY Werte.

hier ist meine Lösung!

// innerWidth
const screen_viewport_inner = () => {
    let w = window,
        i = `inner`;
    if (!(`innerWidth` in window)) {
        i = `client`;
        w = document.documentElement || document.body;
    }
    return {
        width: w[`${i}Width`],
        height: w[`${i}Height`]
    }
};


// outerWidth
const screen_viewport_outer = () => {
    let w = window,
        o = `outer`;
    if (!(`outerWidth` in window)) {
        o = `client`;
        w = document.documentElement || document.body;
    }
    return {
        width: w[`${o}Width`],
        height: w[`${o}Height`]
    }
};

// style
const console_color = `
    color: rgba(0,255,0,0.7);
    font-size: 1.5rem;
    border: 1px solid red;
`;



// testing
const test = () => {
    let i_obj = screen_viewport_inner();
    console.log(`%c screen_viewport_inner = \n`, console_color, JSON.stringify(i_obj, null, 4));
    let o_obj = screen_viewport_outer();
    console.log(`%c screen_viewport_outer = \n`, console_color, JSON.stringify(o_obj, null, 4));
};

// IIFE
(() => {
    test();
})();

So habe ich es geschafft, die Bildschirmbreite in React JS Project zu ermitteln:

Wenn width gleich 1680 ist, geben Sie 570 zurück, andernfalls 200

var screenWidth = window.screen.availWidth;

<Label style={{ width: screenWidth == "1680" ? 570 : 200, color: "transparent" }}>a  </Label>

Screen.availWidth