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...