Sådan får du skærmstørrelse i pixel

Der kan være tidspunkter, hvor din JavaScript-applikation skal vide, hvad størrelsesskærmen har brug for for at kunne udføre bestemte handlinger.

Heldigvis for os er der indbyggede JavaScript-funktioner, der nemt kan få fat i forskellige dimensioner på skærmen på brugerens enhed i pixels. Hvilket du bruger, afhænger af, hvad du gerne vil gøre.

Få brugeropløsning

Du vil muligvis gøre noget, der involverer brugerens enhedsopløsning. I dette tilfælde skal du bruge den indbyggede screen.widthog screen.heightegenskaberne. Disse giver dig størrelsen på den skærm, du har at gøre med.

Dette er ikke det område, du skal arbejde med på siden .T isse værdier repræsenterer helheden af skærmen , der er brugerens skærmopløsning.

Få browserstørrelse

Der kan være en interessant applikation til håndtering af browserens aktuelle størrelse. Hvis du har brug for at få adgang til disse dimensioner, bruge screen.availWidthog screen.availHeightegenskaber til at gøre det.

Husk, det er dimensionerne for hele browservinduet, fra toppen af ​​browservinduet ned til, hvor browseren møder en proceslinje eller kanten af ​​dit skrivebord, afhængigt af din opsætning.

En interessant note :screen.availHeightkan også bruges til at finde ud af, hvor høj en proceslinje er på en computer. Hvis din browseropløsning er sige1366 x 768ogscreen.availHeightrapporterer 728 pixels, er din proceslinje 40 pixels høj. Du kan også beregne proceslinjens højde ved at trække frascreen.heightogscreen.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. */

Få vinduesstørrelse

Disse egenskaber er interessante og kan bruges til at skabe nogle smarte effekter. Du kan bruge window.innerHeightog for window.innerWidthat få størrelsen på vinduet til websiden, som brugeren ser det.

Husk - disse værdier er ikke statiske og vil ændre sig afhængigt af hvad der sker med selve browseren. Med andre ord, hvis selve browseren er lille, bliver disse værdier mindre, og hvis browseren maksimeres, bliver de større.

Hvis du f.eks. Arbejder i Google Chrome, og du åbner konsollen (skal være docket til en side af vinduet), window.innerHeightændres den for at afspejle højden på konsollen, fordi en del af vinduet blokeres.

Du kan teste dette ved at ringe window.innerHeight, notere værdien og derefter øge størrelsen på konsollen og derefter ringe window.innerHeightigen.

Disse egenskaber ændres også, hvis din browser maksimeres eller ændres på nogen måde. Ved en browsers maksimale størrelse er ejendommen window.innerWidthden samme som begge screen.widthog screen.availWidth(medmindre der er en proceslinje på siden, i hvilket tilfælde screen.availWidthikke vil være ens). window.innerHeighter lig med arealet i selve sidens vindue (området på websiden).

Få højde og bredde på websiden

Hvis du har brug for at se, hvor høj eller bred din webside faktisk er, er der egenskaber til at få fat i disse dimensioner: document.body.offsetWidthog document.body.offsetHeight.

Disse egenskaber repræsenterer størrelsen på indholdet i selve siden. En side uden indhold har en document.body.offsetHeighttæt på den samme værdi som window.innerHeightafhængigt af, hvilke margener / polstring der er indstillet på dokumentets brødtekst. Hvis margener og polstring er indstillet til 0html-rodelementet og dokumentets brødtekst, er document.body.offsetHeightog window.innerHeightvil være lig uden indhold.

Disse egenskaber kan bruges til at interagere med din side / applikation afhængigt af hvad du vil gøre.