23 Nisan 2017 Pazar
Twitter

Mobil siteye yönlendirme

Bu yazıda, web sitemiz mobil (cep telefonu, tablet, vb.) den gösterildiğinde, sitemizi mobil versiyona yönlendirmeyi göreceksiniz.

Mobil web siteleri, mobil cihaz kullanıcılarının gereksinimleri dikkate alınarak küçük ekranlara göre tasarlanır.

Webtasarımcıları bu hususu es geçemez.

Bir web sitesi hazırladığınızda 3 seçenekten birini seçersiniz:

1. Sitenizi "Responsive Design" uyumlu yaparsınız. Böylece siteniz hangi platformda gösterilirse gösterilsin, sayfadaki tüm elemanlar ekrana göre biçim değiştirir. Genellikle masaüstü, tablet ve mobil versiyon olarak 3 kademede hazırlanır. (bkz. şu an ziyaret ettiğiniz bu web sitesismiley)

2. Birden fazla site hazırlamak. Kısaca, masaüstü için ayrı web sitesi, tablet için ayrı, mobil için ayrı web siteleri hazırlarsınız. Bilirsiniz, m.siteadi.com ya da mobil.siteadi.com şeklindeki linklerden bahsediyorum.

3. "Bana ne kardeşim, kullanıcılar idare etsin bu şekilde" diyebilirsiniz.

Ben 2. seçenek tercih edildiğinde, kullanıcıları masaüstü versiyondan mobil versiyona nasıl yönlendireceğinizi göstermek istiyorum.

Javascript'te navigator nesnesi üzerinden erişebileceğiniz bir özellik var: userAgent 

navigator.userAgent özelliğini kullanarak tarayıcının servera gönderdiği user-agent bilgisine erişebiliyoruz.

Bu özelliği buradan inceleyebilirsiniz.

Bize düşen de bu bilginin içinde "Android", "BlackBerry", "iPhone|iPad|iPod", "Opera Mini", "IEMobile" geçiyor mu geçmiyor muyu kontrol etmek.

Sonrasında da bunlardan biri geçiyorsa mobil versiyona yönlendirmek tabii ki.

İşte buyrun:

<script type="text/javascript">

    $(document).ready(function () {
        var isMobile = {
            Android: function () {
                return navigator.userAgent.match(/Android/i);
            },
            BlackBerry: function () {
                return navigator.userAgent.match(/BlackBerry/i);
            },
            iOS: function () {
                return navigator.userAgent.match(/iPhone|iPad|iPod/i);
            },
            Opera: function () {
                return navigator.userAgent.match(/Opera Mini/i);
            },
            Windows: function () {
                return navigator.userAgent.match(/IEMobile/i);
            },
            any: function () {
                return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
            }
        };

        if (isMobile.any()) {
            window.location = "http://m.siteadi.com/";
        }
    });

</script>

Güzel bir kodlama.

İsterseniz sadece isMobile.Android() metodundan dönen değere bakarak şunu yap da diyebilirsiniz tabii ki. 

Herkese kolay gelsin.

Şunları da incelemek isteyebilirsiniz:

Değerlendirme

Yazım dilinin sadeliği ve anlaşılabilirliği Puan: 5,00 (1 oy)
Yazıdaki kodların kalitesi Puan: 5,00 (1 oy)
İhtiyaca cevap verme Puan: 4,75 (1 oy)
Tavsiye edilebilirlik Puan: 5,00 (1 oy)
Genel değerlendirme Puan: 5,00 (1 oy)
Puanlamalar 5 üzerindendir.
  • Site Yorumları
  • Facebook Yorumları Facebook Yorumları
Yeni yorum yaz Toplam: 1, Onay bekleyen: 0.
  1. Necmettin Yanık

    Güzel paylaşım