Uzyskaj rozmiar ekranu, bieżącą stronę internetową i okno przeglądarki

2016

Jak mogę dostać windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenYktóra będzie działać we wszystkich głównych przeglądarkach?

zrzut ekranu opisujący pożądane wartości

turkawka
źródło

Odpowiedzi:

1387

Możesz uzyskać rozmiar okna lub dokumentu za pomocą jQuery:

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

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

Do rozmiaru ekranu możesz użyć screenobiektu:

window.screen.height;
window.screen.width;
Ankit Jaiswal
źródło
2
Wydaje się, że metoda jQuery height () działa dla wszystkich elementów i zwraca liczbę ( 46) zamiast ciągu takiego jak css ('height') ( "46px").
Chris,
6
W przypadku mobilnego Safari jQuery nie jest idealnym rozwiązaniem tego pytania. Zobacz notatkę w linii nr 13 na github.com/jquery/jquery/blob/master/src/dimensions.js
Joshua
8
@ 웃 웃웃 웃웃 co edytowałeś w odpowiedzi? według poprawek w ogóle nic nie edytowałeś
Daniel W.
14
@Marco Kerwitz Najgorsze jest to, że wpisałem „javascript get width window”, a treść tej odpowiedzi była w Google. Duży minus jeden ode mnie.
Maciej Krawczyk
2
OP DID ZADAŁ, że jquery jest opcją. Ktokolwiek ninja zredagował pierwotne pytanie, aby je wykluczyć, jest winny tutaj, a nie ludzie udzielający wiarygodnych odpowiedzi za pomocą światowej biblioteki bibliotek javascript.
IncredibleHat
962

To wszystko, co musisz wiedzieć: Uzyskaj rozmiar okna / okna

ale w skrócie:

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

Skrzypce

Przestań edytować tę odpowiedź. Jest edytowany 22 razy teraz przez różne osoby, aby pasowały do ​​ich preferencji formatu kodu. Zwrócono również uwagę, że nie jest to wymagane, jeśli chcesz kierować reklamy tylko na nowoczesne przeglądarki - jeśli tak, potrzebujesz tylko:

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
źródło
58
Dlaczego nie g = document.body?
opłacony frajer
51
@apaidnerd: Standardy niezgodne z przeglądarkami takimi jak IE8 nie obsługują document.body. Jednak IE9 tak.
Michał Mikowski
46
@MichaelMikowski To nieprawda! Obsługuje nawet IE5 document.body.
Nux
32
@nux Stoję poprawiony i potwierdziłem wsparcie w IE8. Wiem jednak, że przynajmniej jedna przeglądarka, na którą ostatnio celowaliśmy, nie obsługiwała document.body i musieliśmy się zmienić, aby zastosować metodę getElementsByTagName. Ale chyba źle zapamiętałem przeglądarkę. Przepraszam!
Michał Mikowski
32
Chciałbym tylko bardzo zaciekle zauważyć, że jednoliterowe nazwy zmiennych nigdy nie są pomocne.
wybe
480

Oto rozwiązanie dla wielu przeglądarek z czystym JavaScript ( źródło ):

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

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
confile
źródło
9
Jest to lepsze, ponieważ jeśli jesteś w stanie wywołać skrypt wystarczająco wcześnie w procesie ładowania (często jest to pomysł), wówczas body elementzwróci wartość, undefinedponieważ dom nie jest jeszcze załadowany.
dgo
16
HA! Stary wątek, ale dzięki za to! Wydaje mi się, że jestem jednym z tych starych „idiotów”, którzy starają się wspierać przynajmniej powrót do IE8, gdy jest to możliwe, z korzyścią dla zaskakującej liczby starszych użytkowników domowych, którzy nigdy nie przestaną używać XP, dopóki ich komputery się nie zapalą. Mam dość zadawania pytań i zamiast uzyskiwania odpowiedzi, głosuję w dół tylko z „STOP WSPARCIEM IE8 !!” jako komentarz. Jeszcze raz dzięki! To rozwiązało problem w czystym powiększeniu zdjęć javascript, które zrobiłem. Jest trochę powolny na IE8, ale teraz przynajmniej działa !!! :-)
Randy
1
świetnie, jest o wiele lepszy niż odpoczynek.
vinayak shahdeo
95

Nie-jQuery sposób na uzyskanie dostępnego wymiaru ekranu. window.screen.width/heightzostał już wdrożony, ale ze względu na responsywny projekt i kompletność uważam, że warto wspomnieć o tych atrybutach:

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

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

availWidth i availHeight - Dostępna szerokość i wysokość na ekranie (z wyjątkiem pasków zadań systemu operacyjnego i tym podobnych).

Daniel W.
źródło
to samo co szerokość ekranu. wysokość - w przeglądarce Chrome na Androidzie jest podzielony przez proporcje pikseli :(
Darius.V
2
window.screen.availHeightwydaje się zakładać tryb pełnoekranowy, więc normalny tryb ekranu wymusza przewijanie (testowane w Firefox i Chrome).
Suzana
@Suzana_K, a następnie użyj window.screen.heightzamiast tego.
vallentin
65

Ale kiedy mówimy o responsywnych ekranach i jeśli z jakiegoś powodu chcemy obsłużyć je za pomocą jQuery,

window.innerWidth, window.innerHeight

daje prawidłowy pomiar. Nawet to usuwa dodatkową przestrzeń paska przewijania i nie musimy się martwić o dostosowanie tej przestrzeni :)

Aabha Pandey
źródło
2
To powinna być zaakceptowana odpowiedź z mnóstwem pozytywnych opinii. O wiele bardziej użyteczna odpowiedź niż obecnie akceptowana odpowiedź, a także nie zależy od jQuery.
developerbmw
5
Niestety window.innerWidthi window.innerHeightnie bierze pod uwagę rozmiaru paska przewijania. Jeśli występują paski przewijania, te metody zwracają nieprawidłowe wyniki dla rozmiaru okna w prawie wszystkich przeglądarkach komputerowych. Zobacz stackoverflow.com/a/31655549/508355
hashchange
20

Możesz także uzyskać szerokość i wysokość OKNA, unikając pasków narzędzi przeglądarki i innych rzeczy. Jest to prawdziwy obszar użytkowy w oknie przeglądarki .

Aby to zrobić, użyj: window.innerWidth i window.innerHeightwłaściwości ( patrz doc na w3schools ).

W większości przypadków najlepszym sposobem będzie, na przykład, wyświetlanie idealnie wyśrodkowanego pływającego okna dialogowego modalnego. Pozwala obliczyć pozycje w oknie, bez względu na to, która orientacja rozdzielczości lub rozmiar okna używa przeglądarki.

serfer2
źródło
2
Według w3schools nie jest to obsługiwane w ie8 ani ie7. Musisz także uważać, gdy łączysz się z w3schools. Zobacz 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>');
koleś
źródło
20

Aby sprawdzić wysokość i szerokość aktualnie załadowanej strony dowolnej witryny za pomocą „konsoli” lub po kliknięciu „Inspekcja” .

krok 1 : Kliknij prawym przyciskiem myszy i kliknij „Sprawdź”, a następnie kliknij „konsola”

krok 2 : Upewnij się, że ekran przeglądarki nie powinien być w trybie „maksymalizacji”. Jeśli ekran przeglądarki jest w trybie „maksymalizacji”, musisz najpierw kliknąć przycisk maksymalizacji (obecny w prawym lub lewym górnym rogu) i cofnąć maksymalizację.

krok 3 : Teraz napisz następujące po znaku większym niż ('>'), tj

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

       > window.innerHeight
            output : your present window height in px (say 359)
solanki ...
źródło
1
Dlaczego nie jest to wybrana odpowiedź?
Iulian Onofrei
1
@IulianOnofrei, ponieważ nie odpowiada w pełni na oryginalny zestaw pytań. Żart, to dla mnie poprawna odpowiedź.
okradać
innerWidth i innerHeight są dokładne tylko wtedy, gdy skala rzutni wynosi 1. Jest to wartość domyślna, ale można ją przypadkowo zmienić za pomocą transformacji css.
Victor Stoddard
„window.innerWidth” w przeciwieństwie do „screen.width” działało dla mnie w celu określenia rozmiaru przeglądarki użytkownika - dziękuję!
Kevin Pajak
10

Jeśli potrzebujesz naprawdę kuloodpornego rozwiązania dla szerokości i wysokości dokumentu ( pageWidthoraz pageHeightna zdjęciu), możesz rozważyć użycie mojej wtyczki jQuery.documentSize .

Ma tylko jeden cel: zawsze zwracać prawidłowy rozmiar dokumentu, nawet w scenariuszach, w których zawodzi jQuery i inne metody . Pomimo nazwy niekoniecznie musisz używać jQuery - jest napisany w waniliowym JavaScript i działa również bez jQuery .

Stosowanie:

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

dla globalnego document. W przypadku innych dokumentów, np. W osadzonej ramce iframe, do której masz dostęp, przekaż dokument jako parametr:

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

Aktualizacja: teraz także dla wymiarów okna

Od wersji 1.1.0 jQuery.documentSize obsługuje również wymiary okien.

Jest to konieczne, ponieważ

jQuery.documentSize zapewnia $.windowWidth()i $.windowHeight(), które rozwiązują te problemy. Aby uzyskać więcej informacji, zapoznaj się z dokumentacją .

hashchange
źródło
VM2859: 1 Nieprzechwycony DOMException: Zablokowano ramce o pochodzeniu „ localhost: 12999 ” dostęp do ramki krzyżowej. (…) Czy jest jakiś sposób na obejście tego ???
fizmhd
1
Nie możesz uzyskać dostępu do ramek iframe z innej domeny, narusza to zasady tego samego pochodzenia . Sprawdź tę odpowiedź .
hashchange
To nie działa, jeśli osadzasz element iframe i próbujesz uzyskać wysokość portu widoku. window.innerHeight równa błędnej wysokości dokumentu. Nie możesz uzyskać dostępu do ramek. z innej domeny nie jest to wykonalne rozwiązanie.
M.Abulsoud,
@ M.Abulsoud Pod warunkiem, że masz dostęp do elementu iframe (bez naruszenia CORS), działa on i jest objęty pakietem testowym. Użyj tej składni . Działa nawet z wieloma zagnieżdżonymi ramkami iframe - zobacz ten przykład na Codepen . Jeśli konfiguracja działa ogólnie, ale nie działa w jednej konkretnej przeglądarce, może to być błąd, którego nie znam. Być może możesz otworzyć problem w takim przypadku? Dzięki.
hashchange 12.12.2018
8

Napisałem małą bookmarklet javascript, którego można użyć do wyświetlenia rozmiaru. Możesz łatwo dodać go do przeglądarki, a po każdym kliknięciu zobaczysz rozmiar w prawym rogu okna przeglądarki.

Tutaj znajdziesz informacje na temat korzystania z bookmarkletu https://en.wikipedia.org/wiki/Bookmarklet

Bookmarklet

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

Kod oryginalny

Oryginalny kod jest w kawie:

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

Zasadniczo kod przygotowuje mały div, który aktualizuje się podczas zmiany rozmiaru okna.

Andi Giga
źródło
5

W niektórych przypadkach związane z układem responsywnym $(document).height()mogą zwracać nieprawidłowe dane, które wyświetlają tylko wysokość portu widoku. Na przykład, gdy jakieś otoki div # ma wysokość: 100%, ten #wrapper może być rozciągnięty przez jakiś blok w nim. Ale jego wysokość nadal będzie jak wysokość rzutni. W takiej sytuacji możesz użyć

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

To reprezentuje rzeczywisty rozmiar opakowania.

Akim Kelar
źródło
Tak wiele odpowiedzi z setkami pozytywnych opinii, ale tylko ta była przydatna.
Nakilon
5

Kompletny przewodnik dotyczący rozmiarów ekranu

JavaScript

Do wysokości:

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

Uwaga: gdy okno jest zmaksymalizowane, będzie to równe screen.availHeight

Dla szerokości:

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

Do wysokości:

$(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.                         

Dla szerokości:

$(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)

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

Hamza Abbasi
źródło
4

Opracowałem bibliotekę znającą rzeczywisty rozmiar okienka ekranu w przeglądarkach na komputery stacjonarne i urządzenia mobilne, ponieważ rozmiary okienek są niespójne na różnych urządzeniach i nie mogą polegać na wszystkich odpowiedziach tego postu (zgodnie z wszystkimi badaniami, które przeprowadziłem na ten temat): https: // github .pl / pyrsmk / W

Pyrsmk
źródło
3

Czasami trzeba zobaczyć zmiany szerokości / wysokości podczas zmiany rozmiaru okna i zawartości wewnętrznej.

W tym celu napisałem mały skrypt, który dodaje pole dziennika, które dynamicznie monitoruje wszystkie zmiany rozmiaru i prawie natychmiast aktualizuje.

Dodaje prawidłowy kod HTML ze stałą pozycją i wysokim indeksem Z, ale jest wystarczająco mały, więc możesz :

  • użyj go na prawdziwej stronie
  • użyj go do testowania widoków mobilnych / responsywnych


Testowano na: Chrome 40, IE11, ale istnieje również możliwość pracy na innych / starszych przeglądarkach ... :)

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

EDYCJA: Teraz style są stosowane tylko do elementu tabeli rejestratora - nie do wszystkich tabel - jest to również rozwiązanie wolne od jQuery :)

jave.web
źródło
3

Dzięki wprowadzeniu globalThisw ES2020 możesz używać właściwości takich jak.

Dla rozmiaru ekranu:

globalThis.screen.availWidth 
globalThis.screen.availHeight

Dla rozmiaru okna

globalThis.outerWidth
globalThis.outerHeight

Do przesunięcia:

globalThis.pageXOffset
globalThis.pageYOffset

...& wkrótce.

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

Prashant Gupta
źródło
2

Możesz użyć ekranu obiektu .

Oto przykład tego, co zwróci:

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

Aby uzyskać screenWidthzmienną, po prostu użyj tego screen.widthsamego z screenHeight, po prostu użyjscreen.height .

Aby uzyskać szerokość i wysokość okna, będzie to screen.availWidthlubscreen.availHeight odpowiednio .

Dla pageXi pageYzmiennych, wykorzystywanie window.screenX or Y. Pamiętaj, że pochodzi on z BARDZO LEWEGO / GÓRY SWOJEGO LEWEGO / NAJLEPSZEGO EKRANU . Więc jeśli masz dwa ekrany szerokości, 1920okno 500px z lewej strony prawego ekranu miałoby wartość X 2420(1920 + 500).screen.width/height, jednak wyświetl szerokość lub wysokość ekranu CURRENT.

Aby uzyskać szerokość i wysokość strony, użyj jQuery's $(window).height()lub$(window).width() .

Ponownie używając jQuery, użyj $("html").offset().topi $("html").offset().leftdla siebie pageXi pageYwartości.

Zach Barham
źródło
0

oto moje rozwiązanie!

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


źródło
1
! screen-ok
0

W ten sposób udało mi się uzyskać szerokość ekranu w React JS Project:

Jeśli szerokość jest równa 1680, zwróć 570, w przeciwnym razie zwróć 200

var screenWidth = window.screen.availWidth;

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

Screen.availWidth

Prashant Yalatwar
źródło