Ponekad vaša JavaScript aplikacija mora znati koja veličina zaslona treba biti u stanju izvršiti određene radnje.
Na našu sreću, ugrađene su JavaScript funkcije koje mogu lako ugrabiti različite dimenzije zaslona na korisnikovom uređaju u pikselima. Način na koji koristite ovisi o tome što želite raditi.
Nabavite Rezoluciju korisnika
Možda biste željeli učiniti nešto što uključuje korisnikovu razlučivost uređaja. U tom biste slučaju trebali koristiti ugrađene screen.widthi screen.heightsvojstva. Oni vam daju veličinu zaslona s kojim imate posla.
Ovo nije područje s kojim morate raditi na stranici .T hese vrijednosti predstavljaju cjelinu zaslona , koji je korisnikov razlučivost prikaza.
Nabavite veličinu preglednika
Možda postoji zanimljiv program za rješavanje trenutne veličine preglednika. Ako trebate pristupiti tim dimenzijama, za to upotrijebite screen.availWidthi screen.availHeightsvojstva.
Zapamtite, ovo su dimenzije cijelog prozora preglednika, od vrha prozora preglednika do mjesta na kojem se preglednik susreće sa programskom trakom ili rubom radne površine, ovisno o postavkama.
Zanimljiva napomena :screen.availHeightmože se koristiti i za utvrđivanje visine programske trake na računalu. Ako je razlučivost preglednika recimo1366 x 768iscreen.availHeightprijavi 728 piksela, tada je traka zadataka visoka 40 piksela. Visinu programske trake možete izračunati i oduzimanjemscreen.heightiscreen.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. */Nabavite veličinu prozora za gledanje
Ta su svojstva zanimljiva i mogu se koristiti za stvaranje izvrsnih efekata. Možete koristiti window.innerHeighti window.innerWidthza dobivanje veličine prozora za web stranicu onakvu kakvu je korisnik vidi.
Imajte na umu - ove vrijednosti nisu statične i mijenjat će se ovisno o tome što se događa sa samim preglednikom. Drugim riječima, ako je sam preglednik mali, te će vrijednosti biti manje, a ako je preglednik maksimiziran, bit će veće.
Ako, primjerice, radite u Google Chromeu i otvorite konzolu (mora biti usidrena na bočnu stranu prozora), window.innerHeightpromijenit će se tako da odražava visinu konzole jer će dio prozora biti blokiran.
To možete testirati pozivom window.innerHeight, bilježenjem vrijednosti, zatim povećanjem veličine konzole, pa window.innerHeightponovnim pozivom .
Ta će se svojstva također promijeniti ako je vaš preglednik na bilo koji način maksimiziran ili promijenjen. Na maksimalnoj veličini preglednika, svojstvo window.innerWidthje isto kao i jedno screen.widthi drugo screen.availWidth(osim ako se sa strane nalazi programska traka, koja u tom slučaju screen.availWidthneće biti jednaka). window.innerHeightjednak je količini površine u prozoru same stranice (površina web stranice).
Dohvatite visinu i širinu web stranice
Ako trebate vidjeti koliko je vaša web stranica zapravo visoka ili široka, postoje svojstva koja će zahvatiti ove dimenzije: document.body.offsetWidthi document.body.offsetHeight.
Ta svojstva predstavljaju veličinu sadržaja u tijelu same stranice. Stranica bez sadržaja ima document.body.offsetHeightvrijednost približno istu vrijednost kao i window.innerHeightovisno o tome koje su margine / dodaci postavljeni na tijelu dokumenta. Ako su marže i padding postavljen 0na html korijenskim elementom i tijelo dokumenta, a zatim document.body.offsetHeighti window.innerHeightbit će jednak bez sadržaja.
Ta se svojstva mogu koristiti za interakciju sa vašom stranicom / aplikacijom, ovisno o tome što želite učiniti.