Mendapatkan Tinggi dan Lebar Layar Monitor

Cara agar mendapatkan ukuran tinggi dan lebar layar monitor memang cukup sederhana, yaitu dengan menggunakan perintah javascript dan/atau jquery yang berjalan pada browser.

Namun dari sini Anda juga akan mengetahui perbedaan teknik serta panjang-pendeknya sebuah perintah antara javascript murni dengan jquery. Perintahnya bisa dilihat di bawah ini dan silakan dicoba.

Versi JQuery

var x = $(window).width(),
    y = $(window).height();

// Tampilkan lebar dan tinggi layar dalam kotak pesan
alert('Lebar layar: ' + x + '; Tinggi layar: ' + y);

Versi JavaScript Murni

var w = window,
    d = document,
    e = d.documentElement,
    g = d.body,
    x = w.innerWidth || e.clientWidth || g.clientWidth, // x = Lebar layar
    y = w.innerHeight || e.clientHeight || g.clientHeight; // y = Tinggi layar

// Tampilkan lebar dan tinggi layar dalam kotak pesan
alert('Lebar layar: ' + x + '; Tinggi layar: ' + y);

Berikut ini tabel perbandingan dari metode javascript dan Jquery dalam menampilkan tinggi dan lebar layar dalam dokumen halaman browser, jendela browser maupun bagian keseluruhan pada layar.

device

width methods	live output
window.screen.width	undefined
window.screen.availWidth	undefined
@media breakpoint

height methods	live output
window.screen.height	undefined
window.screen.availHeight	undefined
@media breakpoint

document

width methods	live output
$(document).width()	undefined
document.body.clientWidth	undefined
document.body.offsetWidth	undefined
document.body.scrollWidth	undefined
document.documentElement.clientWidth	undefined
document.documentElement.offsetWidth	undefined
document.documentElement.scrollWidth	undefined

height methods	live output
$(document).height()	undefined
document.body.clientHeight	undefined
document.body.offsetHeight	undefined
document.body.scrollHeight	undefined
document.documentElement.clientHeight	undefined
document.documentElement.offsetHeight	undefined
document.documentElement.scrollHeight	undefined

viewport

width methods	live output
$(window).width()	undefined
document.documentElement.clientWidth	undefined
window.innerWidth	undefined
window.outerWidth	undefined
@media breakpoint
correctedViewportW()

height methods	live output
$(window).height()	undefined
document.documentElement.clientHeight	undefined
window.innerHeight	undefined
window.outerHeight	undefined
@media breakpoint
correctedViewportH()