Selamat siang teman!
Saya sajikan untuk perhatian Anda terjemahan dari sebuah artikel kecil "Bagaimana Mendapatkan Layar, Jendela, dan Ukuran Halaman Web dalam JavaScript" oleh Dmitri Pavlutin.
Untuk menentukan orientasi jendela browser (lanskap atau potret), Anda dapat membandingkan lebar dan tingginya.
Namun, mudah untuk bingung dalam semua jenis ukuran yang tersedia: ada ukuran layar, ukuran jendela, halaman web, dll.
Apa arti ukuran ini dan, yang paling penting, bagaimana cara mendapatkannya? Inilah yang akan saya bicarakan.
1. Layar
1.1. Ukuran layar
Ukuran layar adalah lebar dan tinggi dari seluruh layar: monitor atau layar seluler.
Anda bisa mendapatkan informasi tentang ukuran layar menggunakan
screenproperti objek window:
const screenWidth = window.screen.width
const screenHeight = window.screen.height
1.2. Ukuran layar yang tersedia
Ukuran layar yang tersedia adalah lebar dan tinggi layar aktif tanpa bilah alat sistem operasi.
Untuk mendapatkan ukuran layar yang tersedia, lihat kembali ke
window.screen:
const availableScreenWidth = window.screen.availWidth
const availableScreenHeight = window.screen.availHeight
2. Jendela
2.1. Ukuran jendela luar (atau ukuran jendela luar)
Ukuran jendela eksternal adalah lebar dan tinggi jendela browser saat ini, termasuk bilah alamat, bilah tab, dan panel browser lainnya.
Anda bisa mendapatkan informasi tentang ukuran jendela luar menggunakan properti
outerWidthdan outerHeightobjek window:
const windowOuterWidth = window.outerWidth
const windowOuterHeight = window.outerHeight
2.2. Ukuran jendela di dalam (atau ukuran jendela di dalam)
Ukuran bagian dalam jendela adalah lebar dan tinggi viewport (viewport).
Objek
windowmenyediakan properti innerWidthdan innerHeight:
const windowInnerWidth = window.innerWidth
const windowInnerHeight = window.innerHeight
Jika kita ingin mendapatkan ukuran bagian dalam jendela tanpa scrollbar, kita melakukan hal berikut:
const windowInnerWidth = document.documentElement.clientWidth
const windowInnerHeight = document.documentElement.clientHeight
3. Ukuran halaman web
Ukuran halaman web adalah lebar dan tinggi dari konten yang ditampilkan (konten yang diberikan).
Untuk mendapatkan ukuran halaman web, gunakan yang berikut ini (termasuk lekukan halaman, tetapi tidak termasuk batas, lekukan, dan scrollbar):
const pageWidth = document.documentElement.scrollWidth
const pageHeight = document.documentElement.scrollHeight
Jika
pageHeightlebih besar dari ketinggian bagian dalam jendela, maka bilah gulir vertikal hadir.
4. Kesimpulan
Semoga Anda sekarang mengerti cara mendapatkan ukuran yang berbeda.
Ukuran layar adalah ukuran monitor (atau tampilan), dan ukuran layar yang tersedia adalah ukuran layar tanpa bilah alat OS.
Ukuran jendela luar adalah ukuran jendela browser aktif (termasuk bilah pencarian, bilah tab, bilah sisi terbuka, dll.), Dan ukuran jendela bagian dalam adalah ukuran viewport.
Akhirnya, ukuran halaman web adalah ukuran konten.
Terima kasih atas perhatian Anda, teman-teman!