Mobil tarayıcıyı otomatik algıla (kullanıcı aracısıyla mı?) [Kapalı]


291

Bir kullanıcının web sitemi mobil web tarayıcısından görüntüleyip görüntülemediğini nasıl tespit edebilirim, böylece web sitemin uygun sürümünü otomatik olarak algılayabilir ve görüntüleyebilirim?


12
İPad önemli mi? :)
Seva Alekseyev

33
Seva'nın yorumu iyi bir soru getiriyor. "Mobil" bugün gerçekten ne anlama geliyor? Tarayıcısı olan ancak çok fazla olmayan bir "özellikli telefon" mu ifade ediyor? Giriş yönteminin ve ekran çözünürlüğünün sınırlayıcı faktörler olduğu tam özellikli akıllı telefonlara atıfta bulunuyor mu? Hem etkileşimi kolay hem de yüksek çözünürlüklü ekranlara sahip tabletlere ne dersiniz? Medya merkezleri gibi cihazlara ne dersiniz - asla oturma odasından ayrılmazlar, ancak benzer sınırlamaları vardır. İşte bir arkadaşım bunu gönderdi. Çok anlayışlı buldum. slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
spaaarky21

1
@Ricki ama ipad'de hala flash içeriği görüntüleyemez veya tinymce gibi bir javascript tabanlı zengin metin editörü kullanamazsınız.
TJ Ellis

1
ipad flaşı görüntüleyemez, ancak tarayıcının flaşı destekleyip desteklemediğini algılamak gibi farklı bir konudur.
Shaun

2
Gelecekten sadece bir gönderi, ancak sitelerinin mobil sürümüne hizmet etmek isteyen herkes "duyarlı tasarım" hakkındaki bazı makalelerle ilgilenebilir.
Vael Victus

Yanıtlar:


91

Evet, User-Agent başlığını okumak hile yapar.

Bazı vardır listeleri dışarı sıfırdan başlamak gerekmez yüzden orada bilinen mobil kullanıcı ajanların. Yapmak zorunda olduğum zaman, bilinen kullanıcı aracılarının bir veritabanını oluşturmak ve revizyon için tespit edildikçe bilinmeyenleri saklamak ve daha sonra manuel olarak ne olduklarını bulmaktır. Bu son şey bazı durumlarda aşırıya kaçabilir.

Apache düzeyinde yapmak istiyorsanız, düzenli olarak kullanıcı aracısını kontrol eden bir dizi yeniden yazma kuralı oluşturan bir komut dosyası oluşturabilirsiniz (veya yalnızca bir kez ve yeni kullanıcı aracılarını unutun veya ayda bir kez, durumunuza uygun olanı)

RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1

örneğin, http: //domain/index.html isteklerini http: //domain/mobile/index.html adresine taşıyabilir.

Bir betiğin bir htaccess dosyasını periyodik olarak yeniden oluşturma yaklaşımından hoşlanmıyorsanız, Kullanıcı Aracısını kontrol eden bir modül yazabilirsiniz (daha önce yapılmış bir tane bulamadım, ancak bu özellikle uygun örneği buldum ) ve kullanıcı aracılarını edinin bazı sitelerden güncelleyin. O zaman yaklaşımı istediğiniz kadar karmaşıklaştırabilirsiniz, ancak bence sizin durumunuzda önceki yaklaşım iyi olacaktır.


3
Bu, web sunucusu katmanında (Apache) PHP gibi bir komut dosyası dili kullanmak yerine bir tür .htaccess komutu aracılığıyla gerçekleştirilebilir mi?

kullanıcı aracısı tarafından belge kök ayarlamak için herhangi bir fikir
Carson

126

Mobil Tarayıcı Algılama'da bunu Apache, ASP, ColdFusion, JavaScript ve PHP'de yapan açık kaynaklı komut dosyaları vardır .


5
@guitar Bu durumda UA'nıza göndermelisiniz.
Adam Tuttle

9
Bleh ... Bu çözümlerin "kod kokusunu" gerçekten sevmiyorum. Regex eşleşmesi, nereden geldikleri hakkında hiçbir ipucu olmadan 4 karakterlik bir sürü önek kullanarak ... hayır teşekkürler.
Hepimiz Monica

2
Bu bir inatçı regex ifadesi. Kabul ediyorum, kod kokusu bu konuda iyi değil.
Jack Cox

5
Aso don; t olmadan "Açık Kaynak" çözümleri ve hiçbir güncelleme göstergesi sevmiyorum.
Eduardo

12
Yine de bunun etrafında bir yol yok. Bir düzeyde her türlü çözüm, kullanıcı aracısı üzerinde normal ifade kontrolü yapacak.
Kyle

33

Sadece bir düşünce ama bu sorunu ters yönden çalıştıysanız? Hangi tarayıcıların mobil olduğunu belirlemek yerine neden hangi tarayıcıların olmadığını belirlemiyorsunuz? Ardından sitenizi varsayılan olarak mobil sürüme kodlayın ve standart sürüme yönlendirin. Bir mobil tarayıcıya bakarken iki temel olasılık vardır. Ya javascript desteği var ya da yok. Dolayısıyla, tarayıcının javascript desteği yoksa, varsayılan olarak mobil sürüme ayarlanır. JavaScript desteği varsa, ekran boyutunu kontrol edin. Belirli bir boyutun altındaki herhangi bir şey muhtemelen bir mobil tarayıcı olacaktır. Daha büyük olan her şey standart düzeninize yönlendirilir. Ardından, JavaScript devre dışı bırakılmış kullanıcının mobil olup olmadığını belirlemeniz yeterlidir.
W3C'ye göre, JavaScript devre dışı bırakılmış kullanıcıların sayısı yaklaşık% 5'ti ve bu kullanıcıların çoğu kapattı, bu da bir tarayıcı ile ne yaptıklarını gerçekten bildiklerini ima ediyor. Kitlenizin büyük bir kısmı mı? Eğer değilse, onlar için endişelenmeyin. Eğer öyleyse, en kötü senaryo nedir? Sitenizin mobil sürümüne göz atan bu kullanıcılarınız var ve bu iyi bir şey.


3
Bu çok iyi bir fikir, bence zarif bir çözüm.
Maxim Veksler

3
+1 bu oldukça tatlı bir fikir gibi görünüyor, ancak bu arama motoru tarayıcılarını etkiler mi?
Mikey G

Bu yanlış yönlendirilmiş bir fikir. Javascript'i devre dışı bırakan tarayıcı uzantıları masaüstü tarayıcılarda çok popülerdir, bu nedenle hiçbir javascript'in mobilin sadece yanlış olduğu anlamına geldiği varsayılır. Pencere / görünüm alanı / ekran çözünürlüğünün bir tarayıcının boyutu ile ilgisi yoktur ve düşük çözünürlüğün elde taşınabilir boyutun web uygulamanızı birçok kullanıcı için çirkin ve sinir bozucu hale getireceğini gösterdiğini varsayarsak. (Örneğin: tam ekran olmayan pencerelerde masaüstü tabletler, büyük tabletler.)
ɈsәɹoɈ

31

JavaScript ile nasıl yaparım:

function isMobile() {
  var index = navigator.appVersion.indexOf("Mobile");
  return (index > -1);
}

Cep telefonlarında yazı tipi boyutunu üçe katladığı www.tablemaker.net/test/mobile.html adresindeki bir örneğe bakın .


hesaplarınızı birleştirmek istiyorsanız buraya bakın: meta.stackexchange.com/questions/18232/…
Brandon

Tablet söz konusu olduğunda (örneğin iPad) bu işe yaramaz
Si8

Opera Mobile nedeniyle "mobi" kullanın.
mgutt

1
Kullanıcı Operatörü'nde "mobi" kullanmayan nadir tarayıcılardan biri olduğu için "Opera Mini" ye ihtiyacınız var.
mgutt


17

Css3 medya sorgularını kullanmayı düşündünüz mü? Çoğu durumda, sitenin ayrı bir mobil sürümünü oluşturmak zorunda kalmadan, özellikle hedeflenen cihaz için bazı css stilleri uygulayabilirsiniz.

@media screen and (max-width:1025px) {
   #content {
     width: 100%;
   }
}

Genişliği istediğiniz gibi ayarlayabilirsiniz, ancak 1025 iPad yatay görünümünü yakalar.

Ayrıca, aşağıdaki meta etiketi kafanıza eklemek istersiniz:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Check out bu yazıyı bazı iyi örnekler için HTML5 Rocks üzerinde


1
Bence bu aslında en iyi yol. Kullanıcı Aracısı dizelerine bakan komut dosyaları güncelliğini yitirir. Mevcut ekran emlak bakmak yeni cihazlar tespit herhangi bir endişe olmadan duyarlı tasarım sağlar.
Adam Tuttle

1
Bu yalnızca istemci tarafı algılaması için çalışır. Ancak sunucu tarafınızın mobil istemciler için farklı davranmasını istiyorsanız, başka bir teknik kullanmanız gerekir.
Igor Brejc

Bu, tam ekran çalışmayan masaüstü tarayıcıları için sefil bir şekilde başarısız olur. Yine de bunu yapmayı seçerseniz, lütfen büyük yazı tipleri ve kenar boşluklarıyla ekran alanını boşa harcamayın veya açılır menülerin arkasındaki önemli işlevleri / bilgileri gizlemeyin. Sitenizi / uygulamanızı bazı kullanıcılarınız için çirkin ve sinir bozucu hale getirecektir.
ɈsәɹoɈ

13

için Android, iPhone, iPad, BlackBerry, Palm, Windows CE, Palm

 <script language="javascript"> <!--
     var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
              if (mobile) {
                  alert("MOBILE DEVICE DETECTED");
                  document.write("<b>------------------------------------------<br>")
                  document.write("<b>" + navigator.userAgent + "<br>")
                  document.write("<b>------------------------------------------<br>")
                  var userAgent = navigator.userAgent.toLowerCase();
                  if ((userAgent.search("android") > -1) && (userAgent.search("mobile") > -1))
                         document.write("<b> ANDROID MOBILE <br>")
                   else if ((userAgent.search("android") > -1) && !(userAgent.search("mobile") > -1))
                       document.write("<b> ANDROID TABLET <br>")
                   else if ((userAgent.search("blackberry") > -1))
                       document.write("<b> BLACKBERRY DEVICE <br>")
                   else if ((userAgent.search("iphone") > -1))
                       document.write("<b> IPHONE DEVICE <br>")              
                   else if ((userAgent.search("ipod") > -1))
                       document.write("<b> IPOD DEVICE <br>")
               else if ((userAgent.search("ipad") > -1))
                       document.write("<b> IPAD DEVICE <br>")
                       else
                   document.write("<b> UNKNOWN DEVICE <br>")
              }
              else
                  alert("NO MOBILE DEVICE DETECTED"); //--> </script>

Bunu oldukça faydalı buldum.
bozdoz

Kesinlikle sizin için tüm bunları halledecek Conditionizr kontrol etmelisiniz! Özel testler ekleyebilir, nesne testleri yoluyla getirebilir ve geri arama yapabilirsiniz. Ayrıca bir dizi önceden yapılmış testler de var: conditionizr.com/detects
Halcyon991

Elenasys, faydalı cevap için teşekkürler. Rağmen, benim db "windows \ sce" eşleşen herhangi bir UA bulamıyorum.
nefski

1
Bu, Windows telefonları için çalışmaz.
jwerre

teşekkür ederim ama Windows telefon belirtilmedi ...
Jorgesys

6

Mobil Cihaz Tarayıcı Dosyası, ASP.NET projeleri için mobil (ve diğer) tarayıcıları tespit etmenin harika bir yoludur: http://mdbf.codeplex.com/


Mobil Cihaz Tarayıcısı hala çalışıyor mu? Çevrimdışı olduğuyla ilgili bir gösterim olduğunu fark ettim mi? ...
creativeedg10

5

Mobil istemcileri kolayca tespit edebilir navigator.userAgentve algılanan istemci türüne göre alternatif komut dosyaları yükleyebilirsiniz:

 $(document).ready(function(e) {

        if(navigator.userAgent.match(/Android/i)
          || navigator.userAgent.match(/webOS/i)
          || navigator.userAgent.match(/iPhone/i)
          || navigator.userAgent.match(/iPad/i)
          || navigator.userAgent.match(/iPod/i)
          || navigator.userAgent.match(/BlackBerry/i)
          || navigator.userAgent.match(/Windows Phone/i)) {

         //write code for your mobile clients here.

          var jsScript = document.createElement("script");
          jsScript.setAttribute("type", "text/javascript");
          jsScript.setAttribute("src", "js/alternate_js_file.js");
          document.getElementsByTagName("head")[0].appendChild(jsScript );

          var cssScript = document.createElement("link");
          cssScript.setAttribute("rel", "stylesheet");
          cssScript.setAttribute("type", "text/css");
          cssScript.setAttribute("href", "css/alternate_css_file.css");
          document.getElementsByTagName("head")[0].appendChild(cssScript); 

    }
    else{
         // write code for your desktop clients here
    }

    });

Daha yönetilebilir bir çözüm için, tüm bunları sizin için halledecek Conditionizr'i kullanabilirsiniz! Özel testler ekleyebilir, nesne testleri yoluyla getirebilir ve geri arama yapabilirsiniz. Ayrıca bir dizi önceden yapılmış testler de var: conditionizr.com/detects
Halcyon991

4

User-Agent dizesini kontrol edebilirsiniz. JavaScript'te bu gerçekten kolaydır, bu sadece navigator nesnesinin bir özelliğidir.

var useragent = navigator.userAgent;

Cihazın JS'de iPhone veya Blackberry olup olmadığını kontrol edebilirsiniz.

var isIphone = !!agent.match(/iPhone/i),
    isBlackberry = !!agent.match(/blackberry/i);

isIphone doğruysa siteye bir Iphone'dan erişiyorsunuz, isBlackBerry ise siteye bir Blackberry'den erişiyorsunuz.

Bunu test etmek için firefox için "UserAgent Switcher" eklentisini kullanabilirsiniz.

Eğer ilgileniyorsanız, burada https://github.com/sebarmeli/JS-Redirection-Mobile-Site burada barındırılan komut dosyası "redirection_mobile.js" kontrol etmek değer olabilir ve birinde daha fazla bilgi okuyabilirsiniz makalem burada:

http://blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-version-through-javascript/


1
Burada .match kullanmak yanlış, bir boole değeri olarak değerlendirilen .test () kullanmak istiyorsunuz, ayrıca .match () 'den çok daha hızlı ve bir dizi döndürmüyor. UserAgent testinize daha yönetilebilir bir çözüm için, tüm bunları sizin için halledecek Conditionizr'i kullanabilirsiniz! Özel testler ekleyebilir, nesne testleri yoluyla getirebilir ve geri arama yapabilirsiniz. Ayrıca bir dizi önceden yapılmış testler de var: conditionizr.com/detects
Halcyon991

4
protected void Page_Load(object sender, EventArgs e)
{
    if (Request.Browser.IsMobileDevice == true)
    {
        Response.Redirect("Mobile//home.aspx");
    }
}

Bu örnek asp.net'te çalışır



0

Evet, kullanıcı tarayıcısı mobil tarayıcıları algılamak için kullanılır. Bunu kontrol etmek için birçok ücretsiz komut dosyası vardır. İşte mobil kullanıcıları farklı web sitelerine yönlendirmenize yardımcı olacak böyle bir php kodu .


1
Bu, web sunucusu katmanında (Apache) PHP kullanmak yerine bir tür .htaccess komutu aracılığıyla gerçekleştirilebilir mi?

0

Bu demosu senaryo ve örneklerle bir araya getirdim:

http://www.mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/

Bu örnek, kullanıcı aracısı algılaması için php işlevlerini kullanır ve kullanıcıların sitenin tarayıcı veya aygıt türlerine göre varsayılan olarak varsayılan olmayacak bir sürümü için bir tercih belirtmelerine izin vermenin ek avantajını sunar. Bu çerezlerle yapılır (javascript'in aksine sunucu tarafında php kullanılarak korunur).

Örnekler için makaledeki indirme bağlantısına baktığınızdan emin olun.

Beğeneceğinizi umuyoruz!


0

MobileESP'nin PHP, Java, APS.NET (C #), Ruby ve JavaScript kancaları vardır. ayrıca ticari kullanım için ücretsiz olan Apache 2 lisansına sahiptir. Benim için önemli olan şey, ekran boyutlarını ve diğer metrikleri değil, yalnızca tarayıcıları ve platformları tanımlamasıdır.


Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.