myNotlar Logo

Ekran Çözünürlüğüne Göre Yönlendirme


Internet Explorer Firefox Opera

Bu konu, ekran çözünürlüğü kontrol edilerek güncel sayfanın değiştirilmesiyle isteğe göre belirtilen bir sayfaya yönlendirmenin nasıl yapılacağını göstermektedir.

Ekran Çözünürlüğünün Öğrenilmesi

Ekran çözünürlüğünün bulunması konusunda açıklandığı gibi ekran çözünürlüğü JavaScript window.screen nesnesinin screen.height ve screen.width özellikleri ile alınmaktadır. screen.height özelliği sistem ekranının (monitörün) piksel cinsinden yüksekliğini verir. screen.width özelliği ise piksel cinsinden genişliğini verir. Başka bir ifadeyle bu iki özellik monitörün aktif yatay ve dikey çözünürlüğünü verir. (Örn, 1024 x 768) Buna göre ekran çözünürlüğü aşağıdaki şekilde öğrenilebilir.

var genislik = window.screen.width;
var yukseklik = window.screen.height;
URL Adresi Yükleme Metodları

JavaScript dahilinde güncel sayfayı farklı bir sayfaya yönlendirmek için temelde iki yöntem bulunmaktadır. İki yöntemde, güncel doküman adresinin protokol, alan adı (host name - domain), port numarası, arama cümleciği vb. gibi bilgilerini tutan window.location nesnesinin assign() ve replace() metodlarıdır. İlk metod olan assign() metodu, güncel pencerede yeni bir URL adresi yüklenmesini sağlar. İkinci metod olan replace() metodu ise assign() ile aynı şekilde güncel pencerede bir URL adresi yüklenmesini sağlar. Fakat, replace() ile güncel sayfa adresi yeni açılan sayfada tarayıcının geçmiş (history) kaydına eklenmez. Yani replace() ile açılan bir sayfada tarayıcının Geri (Back) butonu aktif olmayacaktır. (Bu şekilde yönlendirme, yönlendirildiğini fark edip geri gitmek isteyen bazı ziyaretçiler tarafından hoş karşılanmayabilir.) Bu yüzden aşağıdaki örnekte sadece assign metodu kullanılmaktadır.

Not : Internet Explorer 6/7, Opera 9 ve Safari 3 tarayıcılarında assign() metodu açılan sayfayı geçmiş (history) kaydına ekleyerek sorunsuz çalışmaktadır. Fakat, Firefox 2, assign() metodu ile açılan sayfayı geçmiş (history) kaydına eklememektedir.

location.assign("http://www.mynotlar.com")
Ekran Çözünürlükleri

Aşağıdaki listede popüler ekran çözünürlükleri sıralanmıştır. Bu listedeki ilk 7 değerle karşılaşılma ihtimali çok yüksek olmasına rağmen diğer çözünürlüklerle veya daha farklı çözünürlüklerle karşılaşılması gayet doğaldır.

  1. 1024x768
  2. 1280x800
  3. 1280x1024
  4. 1152x864
  5. 1440x900
  6. 1680x1050
  7. 1280x960
  8. 1600x1200
  9. 800x600
  10. 1280x768
  11. 1400x1050
  12. 1920x1200
  13. 1280x720
  14. 1360x768
  15. 1600x900
  16. 2560x1024
  17. 2560x1600
  18. 320x396
  19. 3360x1050
  20. 960x600
Sonuç

Ekran çözünürlükleri listesinde de görüldüğü gibi bir çok ekran ve dolayısıyla bir çok sayfa boyutu bulunmaktadır. Bu aşamada sayfanın tasarlandığı çözünürlüğüne göre üç şekilde yönlendirme isteği duyulabilir. Bunlar, tam bir ekran çözünürlüğüne göre, yatay (genişlik) çözünürlüğe göre ve dikey (yükseklik) çözünürlüğe göredir.

Aşağıdaki örnek, güncel ekran genişliğinin 1024px ile 1280px (1279) arasında olduğunu varsayarak genişliğin 1024 pikselden ufak veya 1280 piksele eşit veya daha büyük olması durumunda yatay çözünürlüğe göre yönlendirme yapılmasını göstermektedir. Bu örnekte dikkat edilmesi gereken konu: Bu JavaScript kodlarının çalıştığı sayfanın varsayılan ekran çözünürlüğünün kontrol edilmemesidir. Bu, bu örnek için 3 farklı sayfada üç farklı betik (script) yazılacağı ve her farklı betiğin ait olduğu ekran çözünürlüğünü kontrol etmeyeceği, sadece çözünürlüğün uymaması durumunda yönlendirme yapacağı anlamına gelmektedir. Bunun için sadece ilgili kontrol satırının iptal edilmesi yeterli olacaktır.

<script type="text/javascript">

    var genislik = window.screen.width;
    var ufakSayfa = "kucuk.html"
    //var normalSayfa = "normal.html"
    var buyukSayfa = "buyuk.html"

    if(genislik < 1024) location.assign(ufakSayfa);
    //else if(genislik >= 1024 && genislik < 1280) location.assign(normalSayfa);
    else if(genislik >= 1280) location.assign(buyukSayfa);

</script>

Aşağıdaki örnek, 1024 pikselden ufak çözünürlükler için tasarlanmış bir sayfada üstteki kodlarda olması gereken düzenlemeyi göstermektedir.

<script type="text/javascript">

    var genislik = window.screen.width;
    //var ufakSayfa = "kucuk.html"
    var normalSayfa = "normal.html"
    var buyukSayfa = "buyuk.html"

    //if(genislik < 1024) location.assign(ufakSayfa);
    if(genislik >= 1024 && genislik < 1280) location.assign(normalSayfa);
    else if(genislik >= 1280) location.assign(buyukSayfa);

</script>

Sadece yatay çözünürlüğe göre yönlendirme yapan bu kodlara screen.height özelliği de eklenerek, sadece dikey çözünürlük kontrolü veya hem yatay hem de dikey çözünürlük kontrolü yapmak mümkündür.

Aşağıdaki örnek, betiğin (script) çalıştığı ekran çözünürlüğünün 1024x768 ve 1280x1024 ölçüleri arasında olduğu varsayılarak düşük veya yüksek çözünürlükte yönlendirme yapılmasını göstermektedir.

Bu sayfada çalışan kod

<script type="text/javascript">
function yonlendir(adres)
{
	alert(adres + " sayfasına yönlendirilecektiniz!..")
	// location.assign(adres);
}

var genislik = window.screen.width;
var yukseklik = window.screen.height;

var ufakSayfa = "kucuk.html"
var normalSayfa = "normal.html"
var buyukSayfa = "buyuk.html"

if(genislik < 1024 && yukseklik < 768)
	yonlendir(ufakSayfa);
/*
if( (genislik >= 1024 && yukseklik >= 768) &&
	(genislik < 1280 && yukseklik < 1024) )
	yonlendir(normalSayfa);
*/
if(genislik >= 1280 && yukseklik >= 1024)
	yonlendir(buyukSayfa);
</script>
 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | Oyunlar |