Előfordulhat, hogy a JavaScript alkalmazásának tudnia kell, hogy a méretméretű képernyőnek milyen műveletek végrehajtásához kell lennie.
Szerencsénkre vannak beépített JavaScript funkciók, amelyek pixelben egyszerűen megragadhatják a képernyő különböző méreteit a felhasználó eszközén. Amit használ, attól függ, mit szeretne csinálni.
Szerezd meg a felhasználó felbontását
Érdemes lehet valamit megtenni, amely a felhasználó eszközfelbontását tartalmazza. Ebben az esetben a beépített screen.width
és screen.height
tulajdonságokat kell használnia . Ezek megadják a képernyő méretét, amellyel foglalkozik.
Nem ezen a területen kell dolgoznia az oldalon .Ezek az értékek a képernyő teljes egészét , vagyis a felhasználó megjelenítési felbontását képviselik.
Böngésző méretének megadása
Érdekes alkalmazás lehet a böngésző jelenlegi méretének kezelésére. Ha hozzáférnie kell ezekhez a dimenziókhoz, használja a screen.availWidth
és screen.availHeight
tulajdonságokat.
Ne feledje, hogy ezek a teljes böngészőablak méretei, a böngészőablak tetejétől kezdve egészen addig, ahol a böngésző találkozik a tálcával vagy az asztal szélével, a telepítéstől függően.
Érdekes megjegyzés :screen.availHeight
arra is kitalálható, hogy milyen magas a tálca a számítógépen. Ha a böngésző felbontása mondjuk1366 x 768
, ésscreen.availHeight
728 pixelt jelent, akkor a tálca 40 pixel magas. Kiszámíthatja a tálca magasságát kivonássalscreen.height
ésscreen.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. */
Nézze meg az ablak méretét
Ezek a tulajdonságok érdekesek, és felhasználhatók néhány remek hatás létrehozására. A window.innerHeight
és window.innerWidth
segítségével megadhatja a weboldal ablakának méretét, ahogyan a felhasználó látja.
Ne feledje - ezek az értékek nem statikusak, és attól függően változnak, hogy mi történik a böngészővel. Más szóval, ha maga a böngésző kicsi, akkor ezek az értékek kisebbek lesznek, és ha a böngészőt maximalizálják, akkor nagyobbak lesznek.
Ha például a Google Chrome-ban dolgozik, és kinyitja a konzolt (az ablak egyik oldalához kell dokkolni), window.innerHeight
akkor az a konzol magasságát tükrözi, mert az ablak egy része blokkolva lesz.
Kipróbálhatja ezt úgy, hogy felhívja window.innerHeight
, figyelembe veszi az értéket, majd növeli a konzol méretét, majd hívja window.innerHeight
újra.
Ezek a tulajdonságok akkor is megváltoznak, ha a böngészőt bármilyen módon maximalizálják vagy átméretezik. A böngésző maximális méreténél a tulajdonság window.innerWidth
megegyezik mindkettővel, screen.width
és screen.availWidth
(hacsak nincs egy tálca az oldalon, amely esetben screen.availWidth
nem lesz egyenlő). window.innerHeight
megegyezik a terület nagyságával az oldal ablakában (a weboldal területe).
Szerezd meg a weboldal magasságát és szélességét
Ha meg kell néznie, hogy a weblapja milyen magas vagy széles valójában, akkor vannak olyan tulajdonságok, amelyek megragadják ezeket a méreteket: document.body.offsetWidth
és document.body.offsetHeight
.
Ezek a tulajdonságok magának az oldalnak a tartalmát jelentik. A tartalom nélküli oldal document.body.offsetHeight
közel azonos értékkel rendelkezik, mint window.innerHeight
attól függően, hogy milyen margók / kitöltések vannak a dokumentum törzsén. Ha a margók és a kitöltés 0
a html gyökérelemre és a dokumentum törzsére van állítva , akkor document.body.offsetHeight
és window.innerHeight
egyenlő lesz tartalom nélkül.
Ezek a tulajdonságok felhasználhatók az oldaladdal / alkalmazásoddal való interakcióra attól függően, hogy mit szeretnél csinálni.