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


Wie bekomme ich windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenY welches wird in allen gängigen Browsern funktionieren?

screenshot describing which values are wanted


1596
2017-08-09 06:28


Ursprung


Antworten:


Wenn Sie jQuery verwenden, können Sie die Größe des Fensters oder des Dokuments mithilfe von jQuery-Methoden ermitteln:

$(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 die Bildschirmgröße können Sie die screen Objekt auf folgende Weise:

screen.height;
screen.width;

1137
2017-08-09 06:39



Das ist alles, was Sie wissen müssen:

http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

aber kurz:

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);

Geige


815
2017-07-31 15:52



Hier ist eine 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;

362
2018-01-30 17:44



Eine nicht-jQuery-Methode zum Abrufen der verfügbaren Bildschirmdimension. window.screen.width/height wurde bereits gestellt, aber für responsives Webdesign und Vollständigkeit möchte ich diese Attribute erwähnen:

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

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

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


77
2018-06-20 10:06



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

window.innerWidth, window.innerHeight

gibt die richtige Messung. Auch wenn wir den zusätzlichen Platz der Bildlaufleiste entfernen, müssen wir uns keine Gedanken darüber machen, diesen Platz anzupassen :)


47
2018-04-22 07:29



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>');

17
2018-02-11 04:25



Sie können auch die WINDOW Breite und Höhe erhalten, Browser-Symbolleisten und andere Dinge zu vermeiden. Es ist der wirklich nutzbarer Bereich im Browserfenster.

Verwenden Sie dazu: window.innerWidth  und window.innerHeight Eigenschaften (siehe Dokument unter w3schools).

In den meisten Fällen ist dies der beste Weg, um beispielsweise einen perfekt zentrierten, schwebenden modalen Dialog anzuzeigen. Damit können Sie Positionen in Fenstern berechnen, unabhängig davon, welche Auflösungsausrichtung oder Fenstergröße der Browser verwendet.


15
2017-08-21 10:44



Um die Höhe und Breite Ihrer aktuell geladenen Seite einer beliebigen Website zu überprüfen "Konsole" oder nach dem Klicken "Prüfen".

Schritt 1: Klicken Sie auf die rechte Maustaste und klicken Sie auf "Inspizieren" und dann auf "Konsole"

Schritt 2: Stellen Sie sicher, dass sich Ihr Browser-Bildschirm nicht im "Maximieren" -Modus befindet. Wenn sich der Browserbildschirm im Modus "Maximieren" befindet, müssen Sie zunächst auf die Schaltfläche zum Maximieren klicken (entweder in der rechten oder linken oberen Ecke) und die Maximierung aufheben.

Schritt 3: Nun schreibe 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)

12
2017-07-09 04:22