Mobil Site Oluşturma ve Yönlendirme [PHP kodu]

Hızla artan mobil internet kullanımı artık sitelerimizi bu yeni ortama uygun hale getirmeyi gerekli kılıyor. Bir çok insan artık interneti akıllı telefonlarından takip ediyor ve hali hazırda web sayfalarının bir çoğu bu cihazların ekranında minicik ve kullanışsız kalıyor. Biz webmasterlar ve kodcanavarları olarak bu işe bir an önce atılalım diye böyle bir konu açmak istedim. Zamanla bu anlamda edindiğim bütün tecrübeleri paylaşmaya çalışacağım. İlk olarak sitemize giren kullanıcının bilgisayardan mı yoksa bir mobil aygıttan mı girdiğini tespit edelim ve çok yakında hazırlayacağımız mobil sitemizin bulunduğu dizine gönderelim :)

 

Şimdiden hayırlı olsun.

 

Bir android kullanıcısı olarak kendi web sitelerimi yavaş yavaş bu formata uygun hale getirirken, bir çok web sitenin halen daha mobil sayfalarını oluşturmamış olmasını kınıyorum. :) Örnek olarak ilk aklıma gelen en sevdiğim GSM operatörü avea. Avea henüz bir mobil sayfasını oluşturmamış. Diğerleri beni ilgilendirmiyor, bakmadım fakat avea ya buradan geç kalma diye seslenmek istiyorum. :)

Öncelikle yayında olan web sitenizin index sayfasına alttaki kodu yerleştirin.

<?php include('mobile.php'); ?>

Ardından, mobile.php adında bir sayfa oluşturun ve içine alttaki kodları yerleştirin. Bu dosya normal web site dizinimizde olacak ve mobile dizine yönlendirme yapacak.

<?php 
    $iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone"); 
    $android = strpos($_SERVER['HTTP_USER_AGENT'],"Android"); 
    $palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS"); 
    $berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry"); 
    $ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod"); // kontrol ve yönlendirme 


    if ($iphone || $android || $palmpre || $ipod || $berry == true) {
        header('Location: http://mobil.somut.net/'); //yada 
        echo "<script>window.location='http://mobil.somut.net'</script>"; 
    } 
?>

 

 

Ekran çözünürlüğü ile yönlendirme yapma;

 

<script type="text/javascript">
if (screen.width <= 699) {
document.location = "iphonesayfaniz.html";
}
</script>

 

Iphone tespiti ile yönlendirme (user agent kontrolü yapıyor)

<script language=javascript>
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
location.replace("http://www.somut.net/iphonesayfaniz.html" );
}
</script>

 

Aşağıda Google Android User Agent Listesi yeralmaktadır.

 

Mozilla/5.0 (Linux; U; Android 0.5; en-us) AppleWebKit/522+ (KHTML, like Gecko) Safari/419.3

 

Google Nexus

Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

Mozilla/5.0 (Linux; U; Android 2.1; en-us; Nexus One Build/ERD62) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17


Dell

Mozilla/5.0 (Linux; U; Android 1.6; en-gb; Dell Streak Build/Donut AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/ 525.20.1

 

HTC

Mozilla/5.0 (Linux; U; Android 2.1-update1; de-de; HTC Desire 1.19.161.5 Build/ERE27) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

Mozilla/5.0 (Linux; U; Android 2.1-update1; en-us; ADR6300 Build/ERE27) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

Mozilla/5.0 (Linux; U; Android 1.6; en-us; WOWMobile myTouch 3G Build/unknown) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1

Mozilla/5.0 (Linux; U; Android 2.2; nl-nl; Desire_A8181 Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

HTC_Dream Mozilla/5.0 (Linux; U; Android 1.5; en-ca; Build/CUPCAKE) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1

 

Motorola

Mozilla/5.0 (Linux; U; Android 2.2; en-us; DROID2 GLOBAL Build/S273) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

Mozilla/5.0 (Linux; U; Android 3.0; en-us; Xoom Build/HRI39) AppleWebKit/534.13 (KHTML, like Gecko) Version/4.0 Safari/534.13

Mozilla/5.0 (Linux; U; Android 2.2; en-us; Droid Build/FRG22D) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

Mozilla/5.0 (Linux; U; Android 2.2; en-us; DROID2 GLOBAL Build/S273) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

Mozilla/5.0 (Linux; U; Android 2.1-update1; en-us; DROIDX Build/VZW) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 480X854 motorola DROIDX

Mozilla/5.0 (Linux; U; Android 2.1-update1; en-us; Droid Build/ESE81) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

Mozilla/5.0 (Linux; U; Android 2.0; en-us; Droid Build/ESD20) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/ 530.17

Samsung

Mozilla/5.0 (Linux; U; Android 2.2; en-gb; GT-P1000 Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

Mozilla/5.0 (Linux; U; Android 2.2; en-ca; SGH-T959D Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

Mozilla/5.0 (Linux; U; Android 2.2; en-gb; GT-P1000 Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

Mozilla/5.0 (Linux; U; Android 2.0.1; en-us; Droid Build/ESD56) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

 

Sony

Mozilla/5.0 (Linux; U; Android 2.1-update1; de-de; E10i Build/2.0.2.A.0.24) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

 



Etiketler: Mobil Webmaster Web Site

20 yorum

  • Yorumunuz en az 30 karakter olmalıdır. (0)
    Tüm Yorumlar
    • EmreAltun 04.11.2015 11:02

      mobilden normal siteye yönlendirmeyi nasıl yapabiliriz boyut olarak yönlendirme yapmıştım geri döndüremedim ?

      Yanıtla

    • Emre 04.11.2015 10:58

      Merhaba güzel ve yararlı paylaşım siteyi m.site.com a gönderdim ancak tekrar site.com a dönderemedim onu nasıl yapabilirim cookie şeklini anlatışınız ama olmadı yapamadım yardımcı olurmusunuz tam ne yazmama gerekiyor geri dönderme için ?

      Yanıtla

    • Kuzi 12.08.2015 12:08

      merhaba, 

      <script type="text/javascript">
      if (screen.width <= 699) {
      document.location = "iphonesayfaniz.html";
      }
      < /script>

      kod çok işime yaradı, paylaşımınız için teşekkürler. birde şöyle bir soru sormak istiyorum. ekran genşliği 699 dan küçükse stil1.css dosyası değilse stil2.css dosyasının çalıştırılmasını nasıl sağlayabilirim?

      Yanıtla

    • fatih 27.05.2014 10:42

      pek tasarımı nasıl olcak css kodları html

      Yanıtla

    • Sinan Yıldız 04.03.2014 17:40

      Şu ana kadar gördükleriminden en iyi en sade anlatım ile kafa karıştırmadan bilgilendirme yazısı olmuş tebrikler..

      Yanıtla

    • Taner 06.02.2014 21:23

      Selamlar, gerçekten çok güzel bilgiler vermişsiniz teşekkür ederim..

      Benim şöyle bir isteğim vardı, mobil sitem var ve ben bu siteye pcden girişi engellemek farklı adrese yönlendirmek istiyorum ama arama motorlarının botlarını da etkilemeyecek şekilde olması gerekir. Ekran çözünürlüğüne göre yönlendirsem google bot felan etkilenir mi.. Ya da sadece tarayıcıları yönlendirsem yine google bot etkilenir mi... Şimdiden teşekkürlerr, cevaplarınızı bekliyorumm...

      Yanıtla

    • Master 29.10.2013 22:57

      @ Apk Uygulamalar:


      Aradığını şey alttaki bağlantıdaki gibi bir liste mi? Bütün tarayıcılara ait user agent'lar var;

      http://www.useragentstring.com/pages/useragentstring.php

      Yanıtla

    • Apk Uygulamalar 27.10.2013 23:36

      Merhaba.

      İlk verdiğiniz kodları yaptım. mobile.php vs. dosya oluşturarak. Şu iphone android falan onların tüm listesine nasıl ulaşabilirim.

      Yanıtla

    • emin 24.09.2013 10:51

      Kodlar sağlıklı ve çalışıyor emeğinize sağlık. teşekkür ederim

      Yanıtla

    • ByZalim 09.09.2013 13:27

      <script type="text/javascript">
      if (screen.width <= 699) {
      document.location = "iphonesayfaniz.html";
      }
      < /script>

      Burda 699'dan büyük olanları yönlendirmek için ne yapmalıyız. Google bot ve diğer botları etkilemeyecek şekilde olacak?

      Yanıtla

    • hasan 18.04.2013 18:19

      google reklam Kullanıcısından alıntı;

      @ google reklam:


      mobil siteden klasik siteye geç dediğimiz zaman sorun oluyor bu sorunu nasıl çözebiliriz


      ben o soruna şöyle çözüm buldum:

      mobil siteme bir buton ekledim "Tam siteye git" şeklinde, ve bu linki siana siteye değil anasiteile aynı dizindeki "tamsurum.php" sayfasına gönderdim. tamsurum.php içinde ise php ile cookie oluşturup anasayfaya yönlenmesini sağladım. yukarıdaki boyut kontrol kodunu da if (!isset(cookie["boyut"])){ <scrpt>yuarıdakiboyutkodu</scrpt> } şeklinde uyguladım. böylece mobilden siteme gelen kişi ilk olarak boyut diye cookie varmı bakılıyor yoksa yukarıdaki script çalışıyor ve mobile yönlndiriliyor. mobildeki tam site butonuna tıklayn kişi ana sitedeki tamsurum.php den sookie oluşturup normal sayfaya gidiyor. denemek isteyenler için sitemin adresi : www.ezbercim.com  ve mobile.ezbercim.com

      Yanıtla

    • google reklam 12.11.2012 18:32

      @ google reklam:


      mobil siteden klasik siteye geç dediğimiz zaman sorun oluyor bu sorunu nasıl çözebiliriz

      Yanıtla

    • Makro Web 08.11.2012 15:22

      Yararli bi paylasim olmus, tesekkurler.

      Yanıtla

    • google reklam 13.10.2012 13:28

      güzel bilgiler vermişsiniz teşekkürler

      Yanıtla

    • senol 13.02.2012 14:41

      java kodu ile çözünürlüğe göre yönlendirme yapmak daha mantıklı çünki 10 inclik android kullanan tabletler var 1024 * 768 cozunurlugu var normal olarak bizim sitemizi goruntuleyebilecegi halde biz mobile yonlendirmiş oluruz kullanıcıyı.

       

      o nedenle aşağıdaki gibi bir kodla yonlendirmek daha mantıklı.

      <script type="text/javascript">
      if (screen.width <= 699) {
      document.location = "iphonesayfaniz.html";
      }
      < /script>

      Yanıtla

    • Master 20.11.2011 09:43

      Mustafa bey alttaki iki javascript kodu aynı işlemi yapıyor. İkisinden birini deneyebilirsiniz. İlk kod user agent kontrolü yapıyor ve iphone ise yönlendirme yapıyor, diğeri ise ekran çözünürlüğünden yola çıkıyor Çözünürlük küçükse mobil sayfaya yönlendiriyor.

      <script language=javascript>
      if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
      location.replace("http://www.somut.net/iphonesayfaniz.html" );
      }
      </script>
      --------------------- diğer kod -----------------

      <script type="text/javascript">
      if (screen.width <= 699) {
      document.location = "iphonesayfaniz.html";
      }
      </script>

      Yanıtla

    • mustafa adak 19.11.2011 03:16
      iyi gunler yardimlariniz icin tesekkur ederim.. kucuk bir sorum olacakti..sitem normal duz html site .... iphone icinde bir minik IPHONE.HTML diye template hazirladim simdi nasil bir islerm sonucu iphoneden girenleri buraya yonlendirebilirim saygilar kolay gelsin

      Yanıtla

    • Serkan 15.09.2011 01:26
      Bilgi paylaşımınız için çok teşekkürler. iPhone ile denedim ve çalıştırdım.

      Yanıtla

    • Master 20.08.2011 11:55
      @ yatırım: 1. Bu yaptığınız işlem bir yönlendirme işlemi. Mobil sayfanızın ilk sayfasına yönlendireceksiniz ve mobil sitenizi inşa etmiş olmalısınız. tüm sayfalarınızı mobil formatta hazırlamalısınız. 2. Bu kod öbeği sadece içinde geçen User Agent'ları yönlendirir. (iPhone, Android, webOs, BlackBerry, iPod) diğer sistemler için user agentları bulup eklemeniz gerekiyor...

      Yanıtla

    • yatırım 20.08.2011 03:01
      Öncelikle teşekkür ediyorum ama sormak istediğim bazı şeyler var: Sadece bunlar yapmamız yeterli mi? Bunları yaptıktan sonra ekstra birşey yapmamıza gerek olmadan, sayfalarımız mobil formata mı dönüşecek? 2. bir soru: Bu yaptığımız işlemler, sadece Iphone, Android v.s. gibi gelişmiş işletim sistemlerine sahip telefonlar için mi geçerli, yoksa tüm telefonlar için mi? Örneğin 2008 yılı üretimi Nokia 5500 ile de bu sayfaları sorunsuz görme imkanı olacak mı ziyaretçilerin? Bu sayfayı sık kullanılanlara ekledim, cevabınızı bekliyor olacağım. teşekkür ederim tekrardan.

      Yanıtla