Mobil siteye yönlendirme

13.03.2015 13.082 2 Paylaş

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 sitesi)

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: