S-ar putea să apară momente în care aplicația dvs. JavaScript trebuie să știe de ce dimensiune are nevoie ecranul pentru a putea efectua anumite acțiuni.

Din fericire pentru noi, există funcții JavaScript încorporate care pot captura cu ușurință diferite dimensiuni ale ecranului de pe dispozitivul utilizatorului în pixeli. Pe care îl utilizați depinde de ceea ce ați dori să faceți.

Obțineți rezoluția utilizatorului

S-ar putea să doriți să faceți ceva care implică rezoluția dispozitivului utilizatorului. În acest caz, ar trebui să utilizați dispozitivul încorporat screen.width și screen.height proprietăți. Acestea vă oferă dimensiunea ecranului cu care aveți de-a face.

Aceasta nu este zona cu care trebuie să lucrați pe pagină. Taceste valori reprezintă întregul ecran, acesta este rezoluția de afișare a utilizatorului.

Obțineți dimensiunea browserului

S-ar putea să existe o aplicație interesantă pentru a face față dimensiunii actuale a browserului. Dacă trebuie să accesați aceste dimensiuni, utilizați screen.availWidth și screen.availHeight proprietăți pentru a face acest lucru.

Amintiți-vă, acestea sunt dimensiunile întregii ferestre a browserului, de la partea de sus a ferestrei browserului până la locul unde browserul întâlnește o bară de activități sau marginea desktopului, în funcție de configurarea dvs.

O notă interesantă: screen.availHeight poate fi, de asemenea, utilizat pentru a afla cât de înaltă este o bară de activități pe un computer. Dacă rezoluția browserului dvs. este de spus 1366 x 768, și screen.availHeight raportează 728 pixeli, apoi bara de activități are o înălțime de 40 de pixeli. De asemenea, puteți calcula înălțimea barei de activități scăzând screen.height și screen.availHeight:

var taskbarHeight = parseInt(screen.height,10) - parseInt(screen.availHeight,10) + " pixels";
/*
For a user that has a screen resolution of 1366 x 768 pixels, their taskbar is likely 40 pixels if using Windows 10 with no added accessibility features.
*/

Obțineți vizualizarea dimensiunii ferestrei

Aceste proprietăți sunt interesante și pot fi folosite pentru a crea unele efecte minunate. Poți să folosești window.innerHeight și window.innerWidth pentru a obține dimensiunea ferestrei pentru pagina web așa cum o vede utilizatorul.

Rețineți – aceste valori nu sunt statice și se vor schimba în funcție de ceea ce se întâmplă cu browserul însuși. Cu alte cuvinte, dacă browserul în sine este mic, aceste valori vor fi mai mici și, dacă browserul este maximizat, vor fi mai mari.

Dacă, de exemplu, lucrați în Google Chrome și deschideți consola (trebuie să fie andocată într-o parte a ferestrei), window.innerHeight se va schimba pentru a reflecta înălțimea consolei, deoarece o parte a ferestrei va fi blocată.

Puteți testa acest lucru apelând window.innerHeight, luând notă de valoare, apoi mărind dimensiunea consolei, apoi apelând window.innerHeight din nou.

Aceste proprietăți se vor schimba, de asemenea, dacă browserul dvs. este maximizat sau redimensionat în vreun fel. La dimensiunea maximă a unui browser, proprietatea window.innerWidth este la fel ca ambele screen.width și screen.availWidth (cu excepția cazului în care există o bară de activități pe lateral, caz în care screen.availWidth nu va fi egal). window.innerHeight este egal cu cantitatea de suprafață din fereastra paginii în sine (aria paginii web).

Obțineți înălțimea și lățimea paginii web

Dacă trebuie să vedeți cât de înaltă sau lată este de fapt pagina dvs. web, există proprietăți pentru a obține aceste dimensiuni: document.body.offsetWidth și document.body.offsetHeight.

Aceste proprietăți reprezintă dimensiunea conținutului din corpul paginii. O pagină fără conținut are un document.body.offsetHeight de aproape aceeași valoare ca window.innerHeight în funcție de ce margini / umplutură sunt setate pe corpul documentului. Dacă marginile și umplutura sunt setate la 0 pe elementul rădăcină html și corpul documentului, apoi document.body.offsetHeight și window.innerHeight va fi egal fără conținut.

Aceste proprietăți pot fi utilizate pentru a interacționa cu pagina / aplicația dvs., în funcție de ceea ce doriți să faceți.