Wie kann ich windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenYwird die in allen gängigen Browsern funktionieren?

Sie können die Größe des Fensters oder Dokuments mit jQuery ermitteln:

// Size of browser viewport.
$(window).height();
$(window).width();

// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();

Für die Bildschirmgröße können Sie das screenObjekt verwenden:

window.screen.height;
window.screen.width;

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

aber kurz gesagt:

var win = window,
    doc = document,
    docElem = doc.documentElement,
    body = doc.getElementsByTagName('body')[0],
    x = win.innerWidth || docElem.clientWidth || body.clientWidth,
    y = win.innerHeight|| docElem.clientHeight|| body.clientHeight;
alert(x + ' × ' + y);

Geige

Bitte hören Sie auf, diese Antwort zu bearbeiten. Es wurde jetzt 22 Mal von verschiedenen Personen bearbeitet, um ihren Vorlieben für das Codeformat zu entsprechen. Es wurde auch darauf hingewiesen, dass dies nicht erforderlich ist, wenn Sie nur moderne Browser ansprechen möchten - wenn ja, benötigen Sie nur Folgendes:

const width  = window.innerWidth || document.documentElement.clientWidth || 
document.body.clientWidth;
const height = window.innerHeight|| document.documentElement.clientHeight|| 
document.body.clientHeight;

console.log(width, height);

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

Eine Nicht-jQuery-Methode zum Abrufen der verfügbaren Bildschirmdimension. window.screen.width/heightwurde 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#t10 :

AvailWidth und AvailableHeight - Die verfügbare Breite und Höhe auf dem Bildschirm (ausgenommen OS-Taskleisten und dergleichen).

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

window.innerWidth, window.innerHeight

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

Sie können auch die Breite und Höhe des Fensters abrufen, um Browser-Symbolleisten und andere Dinge zu vermeiden. Es ist der wirklich nutzbare Bereich im Browserfenster .

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

In den meisten Fällen ist es beispielsweise am besten, einen perfekt zentrierten schwebenden modalen Dialog anzuzeigen. Sie können damit Positionen im Fenster berechnen, unabhängig davon, welche Auflösungsausrichtung oder Fenstergröße 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>');

So überprüfen Sie die Höhe und Breite Ihrer aktuell geladenen Seite einer Website mithilfe der "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 Browserbildschirm nicht im Maximierungsmodus befindet. Wenn sich der Browserbildschirm im Modus "Maximieren" befindet, müssen Sie zuerst auf die Schaltfläche "Maximieren" (entweder in der rechten oder linken oberen Ecke) klicken und die Maximierung aufheben.

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

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

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

Wenn Sie eine wirklich kugelsichere Lösung für die Breite und Höhe des Dokuments (das pageWidthund pageHeightim Bild) benötigen , sollten Sie ein Plugin von mir, jQuery.documentSize, verwenden .

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

Verwendungszweck:

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

für die globale document. Übergeben Sie für andere Dokumente, z. B. 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 in iOS fehlerhaft , bis es unbrauchbar wird
• $( window ).width()und $( window ).height()sind auf Mobilgeräten unzuverlässig, da sie die Auswirkungen des Zooms auf Mobilgeräten nicht bewältigen.

jQuery.documentSize bietet $.windowWidth()und $.windowHeight(), die diese Probleme lösen. 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 Lesezeichens 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);

Originalcode

Der ursprüngliche Code 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 stellt der Code ein kleines Div voran, das aktualisiert wird, wenn Sie die Größe Ihres Fensters ändern.

In einigen Fällen, die mit dem reaktionsschnellen Layout zusammenhängen, $(document).height()können falsche Daten zurückgegeben werden, 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 immer noch der Höhe des Ansichtsfensters. In einer solchen Situation könnten Sie verwenden

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

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

Vollständige Anleitung zu Bildschirmgrößen

JavaScript

Für höhe:

document.body.clientHeight  // Inner height of the HTML document body, including padding 
                            // but not the horizontal scrollbar height, border, or margin

screen.height               // Device screen height (i.e. all physically visible stuff)
screen.availHeight          // Device screen height minus the operating system taskbar (if present)
window.innerHeight          // The current document's viewport height, minus taskbars, etc.
window.outerHeight          // Height the current window visibly takes up on screen 
                            // (including taskbars, menus, etc.)

Hinweis: Wenn das Fenster maximiert ist, entspricht dies screen.availHeight

Für die Breite:

document.body.clientWidth   // Full width of the HTML page as coded, minus the vertical scroll bar
screen.width                // Device screen width (i.e. all physically visible stuff)
screen.availWidth           // Device screen width, minus the operating system taskbar (if present)
window.innerWidth           // The browser viewport width (including vertical scroll bar, includes padding but not border or margin)
window.outerWidth           // The outer window width (including vertical scroll bar,
                            // toolbars, etc., includes padding and border but not margin)

Jquery

Für höhe:

$(document).height()    // Full height of the HTML page, including content you have to 
                        // scroll to see

$(window).height()      // The current document's viewport height, minus taskbars, etc.
$(window).innerHeight() // The current document's viewport height, minus taskbars, etc.
$(window).outerHeight() // The current document's viewport height, minus taskbars, etc.                         

Für die Breite:

$(document).width()     // The browser viewport width, minus the vertical scroll bar
$(window).width()       // The browser viewport width (minus the vertical scroll bar)
$(window).innerWidth()  // The browser viewport width (minus the vertical scroll bar)
$(window).outerWidth()  // The browser viewport width (minus the vertical scroll bar)

Referenz: https://help.optimizely.com/Build_Campaigns_and_Experiments/Use_screen_measurements_to_design_for_responsive_breakpoints

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

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

Dafür habe ich ein kleines Skript geschrieben, das ein Protokollfeld hinzufügt, das die Größenänderung dynamisch überwacht und fast sofort aktualisiert.

Es fügt einen gültigen HTML-Code mit fester Position und hohem Z-Index hinzu, ist jedoch klein genug, sodass Sie :

• Verwenden Sie es auf einer tatsächlichen Website
• Verwenden Sie es zum Testen von mobilen / responsiven Ansichten

Getestet auf: Chrome 40, IE11, aber es ist sehr gut 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 );

BEARBEITEN: Jetzt werden Stile nur auf das Logger-Tabellenelement angewendet - nicht auf alle Tabellen - auch dies ist eine jQuery-freie Lösung :)

Mit der Einführung von globalThisin ES2020 können Sie Eigenschaften wie verwenden.

Für die Bildschirmgröße:

globalThis.screen.availWidth 
globalThis.screen.availHeight

Für Fenstergröße

globalThis.outerWidth
globalThis.outerHeight

Für Offset:

globalThis.pageXOffset
globalThis.pageYOffset

...& bald.

alert("Screen Width: "+ globalThis.screen.availWidth +"\nScreen Height: "+ globalThis.screen.availHeight)

Sie können den Bildschirm verwenden Objekt verwenden, um dies zu erhalten.

Das Folgende ist ein Beispiel dafür, was es zurückgeben würde:

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

Um Ihre screenWidthVariable, nur nutzen screen.width, das gleiche mit screenHeight, würden Sie nur verwenden screen.height.

Um Ihre Fensterbreite und Höhe zu erhalten, wäre es screen.availWidthoder screen.availHeightsind.

Für die pageXund pageYVariablen verwenden window.screenX or Y. Beachten Sie, dass dies von SEHR LINKS / OBEN IHRES LINKS / OBEN-BILDSCHIRMS stammt . Wenn Sie also zwei Bildschirme mit einer Breite haben, 1920hat ein Fenster mit einer Größe von 2420500 Pixel links vom rechten Bildschirm einen X-Wert von (1920 + 500). screen.width/heightZeigen Sie jedoch die Breite oder Höhe des Bildschirms CURRENT an.

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

Verwenden Sie wieder jQuery und verwenden Sie $("html").offset().topund $("html").offset().leftfür Ihre pageXund pageYWerte.

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 die Breite gleich 1680 ist, geben Sie 570 zurück, andernfalls geben Sie 200 zurück

var screenWidth = window.screen.availWidth;

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

Screen.availWidth