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 methodslive output
window.screen.widthundefined
window.screen.availWidthundefined
@media breakpoint
height methodslive output
window.screen.heightundefined
window.screen.availHeightundefined
@media breakpoint

document

width methodslive output
$(document).width()undefined
document.body.clientWidthundefined
document.body.offsetWidthundefined
document.body.scrollWidthundefined
document.documentElement.clientWidthundefined
document.documentElement.offsetWidthundefined
document.documentElement.scrollWidthundefined
height methodslive output
$(document).height() undefined
document.body.clientHeightundefined
document.body.offsetHeightundefined
document.body.scrollHeightundefined
document.documentElement.clientHeightundefined
document.documentElement.offsetHeightundefined
document.documentElement.scrollHeightundefined

viewport

width methodslive output
$(window).width()undefined
document.documentElement.clientWidthundefined
window.innerWidthundefined
window.outerWidthundefined
@media breakpoint
correctedViewportW()
height methodslive output
$(window).height()undefined
document.documentElement.clientHeightundefined
window.innerHeightundefined
window.outerHeightundefined
@media breakpoint
correctedViewportH()
 

Contact Form

Name

Email *

Message *

Recent Comment

Baca artikel lainnya :

Memuat...