Cara mengetahui lebar dan tinggi jendela web browser dengan javascript

Pernah kah teman-teman berfikir, atau kepikiran tidak jika kita bisa menghitung lebar dan tinggi sebuah web browser, untuk cara mengetahui lebar dan tinggi jendela web browser, kita akan mengguinakan javascript, dengan bantuan javascript browser BOM, kita bisa melakukan itu, jadi nantinya kita akan menghitung dengan javascript, lalu hitungan itu kita akan cetak di sebuah tag, kurang lebihnya seperti itu, caranya sangat simple ko teman-teman, oke untuk mengetahui itu jangan kemana-mana simak terus ya.

Cara mengetahui lebar dan tinggi jendela web browser, ada beberapa properties, di antaranya:

window.innerHeight – Ketinggian dalam jendela browser (dalam pixels ya).
window.innerWidth – Ketinggian dalam jendela browser (dalam pixels ya).

Tapi itu untuk web browser modern bagaimana jika ada yang masih menggunakan webbrowser lama, seperti internet exploler, untuk internet exploler 8,7,6,5 di antaranya:

document.documentElement.clientHeight
document.documentElement.clientWidth or
document.body.clientHeight
document.body.clientWidth

Sumber ini saya dapatkan dari w3school ya teman-teman, nanti teman-teman bisa lihat sendiri jika ingin mengetahuinya, oke lalu bagaimana jika saya ingin di semua browser bisa menggunakannya, kita bisa menggunakan cara sebagi berikut, sumber w3school:

<!DOCTYPE html>
<html>
<head>
	<title>Cara Mengetahui Lebar dan Tinggi Jendela Web Browser</title>
	<-e-style type="text/css">
		.container{
			width: 500px;
			margin: auto;
			background: #F3F3F3;
			box-shadow: 5px 5px 5px 5px #555;
			text-align: center;
		}
		.container_2{
			width: 60px;
			margin: auto;
		}
		p{
			background-color: magenta;
			width: 300px;
			margin: auto;
			padding: 5px;
			border-radius: 5px;
		}
		
	</style>
</head>
<body>
	<div class="container">
		<h1>Cara Mengetahui Lebar dan Tinggi Jendela Web Browser</h1>
		<p id="demo"></p>
		
	<-e-script>
	var widthNode = window.innerWidth
	 document.documentElement.clientWidth
	 document.body.clientWidth;

	var heightNode = window.innerHeight
	 document.documentElement.clientHeight
	 document.body.clientHeight;

	var demoNode = document.getElementById("demo");
	demoNode.innerHTML = "Telah di Ketahui tinggi dan lebar jendela Web Browser ini Adalah: <br> " + "Lebar "+ widthNode + ", Tinggi: " + heightNode + ".";
	</script>
	</div>
</body>
</html>

Jadi dengan menggunakan script yang saya buat di atas, dan hasil output, saya membuatnya dengan tag p dengan id demo, jadi nanti penghitungannya bisa tampil di sana: oke langsung saja kita liat hasilnya:

Gambar di atas adalah hasil normal ya, kebetulan karena saya menggunakan komputer yang cukup lebar, kita dapatkan lebar dan tingginya sekitar: 1920px dan tinggi 947px, Lalu sekarang saya akan coba mengecilkan browsernya, maka saya akan mendapatkan:

Lebar dan tinggi yang berbeda, oiy ketika ingin mengecek, teman-teman harus refresh terlebih dahulu ya, oke sangat simple ya teman-teman, dan saya rasa cukup sampai disini dulu belajar kita tentang Cara mengetahui lebar dan tinggi jendela web browser, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.

Cara Mengetahui Lebar dan Tinggi Jendela Web Browser

Kategori