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("https://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 Kayıtlı Üye Yorum: 1

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

      Yanıtla

    • Emre

      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

      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

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

      Yanıtla

    • Sinan Yıldız

      Ş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

      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

    • Apk Uygulamalar

      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

      Master Admin Yorum: 387 Forum Mesaj: 295

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

      https://deviceatlas.com/blog/list-of-user-agent-strings

    • emin

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

      Yanıtla

    • ByZalim

      <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

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

      Yanıtla

      hasan

      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"])){ yuarıdakiboyutkodu } ş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

    • Makro Web

      Yararli bi paylasim olmus, tesekkurler.

      Yanıtla

    • google reklam

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

      Yanıtla

    • senol

      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 Admin Yorum: 387 Forum Mesaj: 295

      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("https://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
      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
      Bilgi paylaşımınız için çok teşekkürler. iPhone ile denedim ve çalıştırdım.

      Yanıtla

    • yatırım
      Ö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

      Master Admin Yorum: 387 Forum Mesaj: 295

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

Yorum Yaz

Sitede Ara
  • CS 1.5 ve CS 1.6 İçin Sağlam Bir CFG (cengaver.cfg)
    güzel bir cfg tavsiye ediyorum...
  • Soyut Kavramlara Örnekler
    Abi somut yazsaydın da yine olmazdı. ...
  • Evcil Kuş Hastalıkları ve Tedavi Yöntemleri
    Merhaba, geçmiş olsun bu durumda kendi başınıza tedavi uygulamanız zor olsa da kırık çıkık için tıklayı...
  • Finansal Yönetim Ders Notları | 1-7
    gerçekten emeğinize sağlık çok güzel bir anlatım olmuş....
  • Yazımı Karıştırılan Sözcükler | TDK Yazım Kılavuzu | Doğru Kelime Klavuzu
    Atölye Fransızca'dan dilimize geçmiş bir isimdir. Fransızca atelier olarak yazılır. Evet atelye ...
  • Online Cetvel Sitesi
    Bu ayarları yaptıktan sonra elimdeki cetvelle test ettim gerçekten doğru gösteriyor. Ekrana tuttuğum ce...
  • Doğal Varlık Nedir - Anlamı ve Örnekler
    Çook sevdim bu siteyi... ...