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

2017

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

Screenshot, der beschreibt, welche Werte gewünscht werden

Turteltaube
quelle
9
pageHeight (auf einem Bild) u kann mit bekommen: document.body.scrollHeight
befzz
Könnte dies auch relevant sein? developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia
MEM
3
Interessant: ryanve.com/lab/dimensions
e2-e4
1
Hilfreiches Tutorial - w3schools.com/jsref/prop_win_innerheight.asp
Onkel Iroh

Antworten:

1387

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;
Ankit Jaiswal
quelle
2
Die jQuery-Methode height () scheint für alle Elemente zu funktionieren und gibt eine Zahl ( 46) anstelle einer Zeichenfolge wie css ('height') ( "46px") zurück.
Chris
6
Im Umgang mit mobiler Safari ist jQuery leider keine perfekte Lösung für diese Frage. Siehe den Hinweis in Zeile 13 unter github.com/jquery/jquery/blob/master/src/dimensions.js
Joshua
8
@ 웃 웃웃 웃웃 was hast du in der Antwort bearbeitet? Laut den Überarbeitungen haben Sie überhaupt nichts bearbeitet
Daniel W.
14
@Marco Kerwitz Das Schlimmste ist, dass ich "Javascript get window width" eingegeben habe und der Inhalt dieser Antwort bei Google war. Ein großes Minus von mir.
Maciej Krawczyk
2
Die OP fragte , dass Jquery eine Option. Wer auch immer Ninja die ursprüngliche Frage bearbeitet hat, um sie auszuschließen, ist hier schuld, nicht Leute, die legitime Antworten mit einer weltweit akzeptierten Javascript-Bibliothek geben.
IncredibleHat
963

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);
Sidonaldson
quelle
58
Warum nicht g = document.body?
Ein bezahlter Nerd
51
@apaidnerd: Standards, die Browsern wie IE8 widersprechen, unterstützen document.body nicht. IE9 tut dies jedoch.
Michael Mikowski
46
@ MichaelMikowski Das stimmt nicht! Sogar IE5 unterstützt document.body.
Nux
32
@nux Ich stehe korrigiert und habe die Unterstützung in IE8 bestätigt. Ich weiß jedoch, dass mindestens ein Browser, auf den wir kürzlich abzielten, document.body nicht unterstützte und wir uns ändern mussten, um den Ansatz getElementsByTagName zu verwenden. Aber ich glaube, ich habe mich falsch an den Browser erinnert. Es tut uns leid!
Michael Mikowski
32
Ich möchte nur sehr fragend bemerken, dass Ein-Buchstaben-Variablennamen niemals hilfreich sind.
Wybe
480

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;
konfile
quelle
9
Dies ist besser, da, wenn Sie das Skript früh genug im Ladevorgang aufrufen können (häufig die Idee), der body elementWert einen Wert von undefinedzurückgibt, da der Dom noch nicht geladen ist.
dgo
16
HA! Alter Thread aber danke dafür! Ich denke, ich bin einer dieser alten "Idioten", die versuchen, zumindest zurück zu IE8 zu kommen, wenn dies möglich ist, zum Vorteil der überraschenden Anzahl älterer Heimanwender, die XP niemals einstellen werden, bis ihre Maschinen Feuer fangen. Ich habe es satt, Fragen zu stellen und anstatt eine Antwort zu bekommen, werde ich nur mit "STOP SUPPORTING IE8 !!" als Kommentar. Noch einmal Danke! Dies löste ein Problem für mich in einem reinen Javascript-Foto-Zoom, den ich gemacht hatte. Es ist ein wenig langsam auf IE8, aber jetzt funktioniert es zumindest !!! :-)
Randy
1
toll, es ist viel besser als ruhen.
Vinayak Shahdeo
95

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

Daniel W.
quelle
Gleich wie Breite screen.height - auf Android Chrome Browser zeigt geteilt durch das
Pixelverhältnis
2
window.screen.availHeightscheint den Vollbildmodus anzunehmen, so dass der normale Bildschirmmodus das Scrollen erzwingt (getestet in Firefox und Chrome).
Suzana
@Suzana_K dann window.screen.heightstattdessen verwenden.
Vallentin
66

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

Aabha Pandey
quelle
2
Dies sollte die akzeptierte Antwort mit vielen positiven Stimmen sein. Eine viel nützlichere Antwort als die derzeit akzeptierte Antwort, und sie hängt auch nicht von jQuery ab.
Developerbmw
5
Leider window.innerWidthund window.innerHeightnicht die Größe der Bildlaufleiste berücksichtigen. Wenn Bildlaufleisten vorhanden sind, geben diese Methoden in fast allen Desktop-Browsern falsche Ergebnisse für die Fenstergröße zurück. Siehe stackoverflow.com/a/31655549/508355
Hashchange
20

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.

serfer2
quelle
2
Dies wird laut w3schools weder in ie8 noch in ie7 unterstützt. Außerdem müssen Sie aufpassen, wenn Sie auf w3schools verlinken. Siehe meta.stackexchange.com/questions/87678/…
thecarpy
20
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>');
Kumpel
quelle
20

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)
Solanki ...
quelle
1
Warum ist das nicht die ausgewählte Antwort?
Iulian Onofrei
1
@IulianOnofrei, weil es die ursprünglichen Fragen nicht vollständig beantwortet. Scherz, es ist die richtige Antwort für mich.
Rob
innerWidth und innerHeight sind nur dann genau, wenn der Maßstab des Ansichtsfensters 1 ist. Dies ist die Standardeinstellung, kann jedoch mithilfe von CSS-Transformationen versehentlich geändert werden.
Victor Stoddard
"window.innerWidth" im Gegensatz zu "screen.width" hat für mich die Größe des Browsers des Benutzers bestimmt - danke!
Kevin Pajak
10

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

jQuery.documentSize bietet $.windowWidth()und $.windowHeight(), die diese Probleme lösen. Weitere Informationen finden Sie in der Dokumentation .

Hashwechsel
quelle
VM2859: 1 Nicht erfasste DOMException: Blockierte einen Frame mit dem Ursprung " localhost: 12999 " für den Zugriff auf einen Cross-Origin-Frame. (…) Gibt es eine Möglichkeit, dies zu überwinden ?
Fizmhd
1
Sie können nicht von einer anderen Domain aus auf iframes zugreifen, da dies gegen die Richtlinie mit demselben Ursprung verstößt . Schauen Sie sich diese Antwort an .
Hashchange
Dies funktioniert nicht, wenn Sie einen Iframe einbetten und versuchen, die Höhe des Ansichtsfensters zu ermitteln. window.innerHeight entspricht der Dokumenthöhe, die fehlerhaft ist. Sie können nicht auf Frames zugreifen. aus einer anderen Domäne ist es keine praktikable Lösung.
M.Abulsoud
@ M.Abulsoud Vorausgesetzt, Sie haben Zugriff auf den Iframe (keine CORS-Verletzung), funktioniert er und wird von der Testsuite abgedeckt. Verwenden Sie diese Syntax . Es funktioniert sogar mit mehreren ineinander verschachtelten Iframes - siehe dieses Beispiel in Codepen . Wenn Ihr Setup im Allgemeinen funktioniert, aber in einem bestimmten Browser fehlschlägt, ist dies möglicherweise ein Fehler, den ich nicht kenne. Vielleicht können Sie in diesem Fall ein Problem eröffnen? Vielen Dank.
Hashchange
8

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.

Andi Giga
quelle
5

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.

Akim Kelar
quelle
So viele antworten mit Hunderten von Gegenstimmen, aber nur diese war nützlich.
Nakilon
5

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

Hamza Abbasi
quelle
4

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.

Pyrsmk
quelle
3

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

jave.web
quelle
3

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)

Prashant Gupta
quelle
2

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.

Zach Barham
quelle
screenX / Y ist relativ zum primären Bildschirm, nicht relativ zum Bildschirm ganz links / ganz oben. Aus diesem Grund ist der Wert negativ, wenn Sie sich derzeit auf einem Bildschirm links vom primären Bildschirm befinden.
Tom vor
0

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


quelle
1
! screen-ok
0

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

Prashant Yalatwar
quelle