JavaScript ile Pencere Çözünürlüğünü Ekrana Yazdırmak

Yükleniyor

Bugün bir temayı “duyarlı” hale getirmeye çalışırken bana oldukça fayda sağlayan kodu sizlerle paylaşmak istedim. Bu basit kod sayesinde tarayıcı penceresinin boyutuna göre CSS’i kolayca yazabildim.

Öncelikle paylaşacağım kodun amacı ziyaretçileri bilgilendirmek değil bizi bilgilendirmek. Bu yüzden mümkünse bu kodu localhostta kullanın ya da geceleyin ziyaretçi sayısının az olduğu bir saatte sitenize yerleştirin. Çünkü amaç görsellik değil tasarımcıya kolaylık sağlamak.

İşte kod:

<script>
window.onresize = displayWindowSize;
window.onload = displayWindowSize;
function displayWindowSize() {
    var myWidth = 0, myHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
        myWidth = window.innerWidth; myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
        myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        myWidth = document.body.clientWidth; myHeight = document.body.clientHeight;
    }
    document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
};
</script>
<p id="dimensions"></p>

bu kodu body tagının hemen altına yerleştirebilirsiniz. Ne de olsa sizden başka biri görmeyecek.

Kodun çıktı örneği:
Fiddle Örneği

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir