Merhaba arkadaşlar. Bu makalemizde javascript ile ziyaretçimizin ekran çözünürlüğünü öğreneceğiz. Bu bilgiyi alarak bir içeriğin, belli bir çözünürlük değerinin altında ise görünmemesini sağlayacağız. Şartlarımız aşağıdaki gibi olsun:
* İçerik , ekran genişliği 996 pixel ve üzeri değerde olduğu zaman görünsün.
* Mobil'de görünmesin.
Evet arkadaşlar yapmak istediğimiz şeyleri yukarıda yazdık. Şimdi kodlarımıza geçelim. Öncelikle html, sonrasında sırasıyla css ve javascript kodlarımızı yazacağız. Html kodlarımız web sayfasında body etiketleri arasına yazılır. Css ve Javascipt kodlarımız head etiketleri arasına yazılmaktadır.

<div class="gorun" id="indirimdivimiz">

Bu div içerik divimizdir.

</div>

<style type="text/css">

.gorun {

position:absolute;

top:235px;

right:30px;

}

</style>

<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>

<script>

$(document).ready(function() { 

var genislik = window.screen.width;

if(genislik < 996){

$('#indirimdivimiz').hide(1); 

}

var mobil = (/iphone|ipad|ipod|android|blackberry|mini|windowssce|palm/i.test(navigator.userAgent.toLowerCase()))

if(mobil){ $('#indirimdivimiz').hide(1); } 

});

</script>

Sayfamızın genişlik değerini genislik adındaki değişkenimize atadık. İf ile şartımızı belirleyerek istediğimiz çözünürlüğün altında olduğu zaman id'sini belirttiğimiz içerik sayfada görüntülenmeyecektir. Sonrasında kullanıcının mobil bir cihazdan bağlantı yapıp-yapmadığını kontrol ettik. Mobilden bağlanılıyorsa id'sini belirttiğimiz içeriğimizi gizledik. Böylelikle bu makalemizin daha sonuna geldik. Tekrar görüşmek üzere...