Automatyczne wykrywanie przeglądarki mobilnej (za pośrednictwem klienta?) [Zamknięte]

291

Jak mogę wykryć, czy użytkownik przegląda moją stronę internetową za pomocą mobilnej przeglądarki internetowej, dzięki czemu mogę automatycznie wykryć i wyświetlić odpowiednią wersję mojej strony internetowej?


źródło
12
Czy iPad się liczy? :)
Seva Alekseyev
33
Komentarz Sevy rodzi dobre pytanie. Co tak naprawdę oznacza „mobilny”? Czy odnosi się to do „telefonu funkcji”, który ma przeglądarkę, ale niewiele z niej? Czy dotyczy to w pełni funkcjonalnych smartfonów, w których metoda wprowadzania i rozdzielczość ekranu są czynnikami ograniczającymi? Co powiesz na tablety, które są łatwe w obsłudze i mają wyświetlacze o wysokiej rozdzielczości? Co powiesz na urządzenia takie jak centra multimedialne - nigdy nie opuszczają salonu, ale mają podobne ograniczenia. Wysłał mi to znajomy w pracy. Uważam to za bardzo wnikliwe. slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
spaaarky21
1
@Ricki, ale na iPadzie nadal nie można np. Wyświetlać treści flash ani używać edytora tekstu sformatowanego opartego na javascript, takiego jak tinymce.
TJ Ellis,
1
iPad nie może wyświetlać pamięci flash, ale to inny temat, na przykład wykrywanie, czy przeglądarka obsługuje pamięć flash.
Shaun
2
Tylko post z przyszłości, ale każdy zainteresowany obsługą mobilnej wersji swojej witryny może zainteresować się artykułami na temat „responsive design”.
Vael Victus

Odpowiedzi:

91

Tak, czytanie nagłówka User-Agent załatwi sprawę.

Istnieje kilka list out tam znanych mobilnych agentów użytkownika, dzięki czemu nie trzeba zaczynać od zera. To, co zrobiłem, gdy musiałem to zbudować bazę danych znanych programów użytkownika i przechowywać nieznane dane, które są wykrywane w celu rewizji, a następnie ręcznie ustalić, jakie są. Ta ostatnia rzecz może być przesadą w niektórych przypadkach.

Jeśli chcesz to zrobić na poziomie Apache, możesz utworzyć skrypt, który okresowo generuje zestaw reguł przepisywania sprawdzających agenta użytkownika (lub tylko raz i zapomina o nowych klientach użytkownika, lub raz w miesiącu, w zależności od przypadku), na przykład

RewriteEngine On

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

które przenosiłyby na przykład żądania do http: //domain/index.html do http: //domain/mobile/index.html

Jeśli nie podoba ci się podejście polegające na okresowym odtwarzaniu skryptu przez plik htaccess, możesz napisać moduł sprawdzający agenta użytkownika (nie znalazłem już utworzonego, ale znalazłem ten szczególnie odpowiedni przykład ) i uzyskaj agenty użytkownika z niektórych witryn, aby je zaktualizować. Następnie możesz skomplikować podejście tak bardzo, jak chcesz, ale myślę, że w twoim przypadku poprzednie podejście byłoby w porządku.

Vinko Vrsalovic
źródło
3
Czy można tego dokonać na warstwie serwera WWW (Apache) za pomocą jakiegoś polecenia .htaccess - zamiast używać języka skryptowego, takiego jak PHP?
jakikolwiek pomysł na ustawienie rootowania dokumentu przez klienta użytkownika
Carson
126

W przeglądarce Detect Mobile Browser znajdują się skrypty open source, które robią to w Apache, ASP, ColdFusion, JavaScript i PHP.

Chad Smith
źródło
5
@ guitar W takim przypadku powinieneś wysłać swoje UA.
Adam Tuttle
9
Bleh ... Naprawdę nie lubię „zapachu kodu” tych rozwiązań. Dopasowywanie wyrażeń regularnych przy użyciu zestawu 4-znakowych prefiksów bez pojęcia, skąd się wzięły ... nie, dziękuję.
We Are All Monica,
2
To jedno z wyrażeń regularnych. Zgadzam się, zapach kodu nie jest dobry w tym przypadku.
Jack Cox,
5
Nie lubię też rozwiązań typu „open source” bez licencji i bez wskazania aktualizacji.
Eduardo
12
Nie można jednak tego obejść. Na pewnym poziomie dowolne rozwiązanie przeprowadzi sprawdzenie wyrażenia regularnego na kliencie użytkownika.
Kyle
33

Tylko myśl, ale co, jeśli rozwiążesz ten problem z przeciwnej strony? Zamiast określać, które przeglądarki są mobilne, dlaczego nie określić, które przeglądarki nie są? Następnie zakoduj swoją witrynę do domyślnej wersji mobilnej i przekieruj do standardowej wersji. Istnieją dwie podstawowe możliwości, patrząc na przeglądarkę mobilną. Albo ma obsługę javascript, albo nie. Jeśli więc przeglądarka nie obsługuje javascript, domyślnie będzie dostępna wersja mobilna. Jeśli obsługuje JavaScript, sprawdź rozmiar ekranu. Wszystko poniżej pewnego rozmiaru prawdopodobnie będzie także przeglądarką mobilną. Coś większego zostanie przekierowane do standardowego układu. Następnie wszystko, co musisz zrobić, to ustalić, czy użytkownik z wyłączoną obsługą JavaScript jest mobilny, czy nie.
Według W3C liczba użytkowników z wyłączonym JavaScript wynosiła około 5%, a większość z nich wyłączyła go, co oznacza, że ​​faktycznie wiedzą, co robią z przeglądarką. Czy stanowią dużą część twojej publiczności? Jeśli nie, nie przejmuj się nimi. Jeśli tak, jaki jest najgorszy scenariusz? Masz użytkowników przeglądających mobilną wersję Twojej witryny, i to dobrze.

w połowie drogi
źródło
3
To bardzo dobry pomysł, myślę, że to eleganckie rozwiązanie.
Maxim Veksler
3
+1 to brzmi całkiem fajnie, ale czy wpłynęłoby to na roboty indeksujące w wyszukiwarkach?
Mikey G,
To błędny pomysł. Rozszerzenia przeglądarki, które wyłączają javascript, są bardzo popularne w przeglądarkach komputerowych, więc zakładając, że brak javascript oznacza, że ​​telefon komórkowy jest po prostu zły. Rozdzielczość okna / rzutni / ekranu nie ma nic wspólnego z rozmiarem przeglądarki, a założenie, że niska rozdzielczość wskazuje rozmiar podręczny, sprawi, że twoja aplikacja internetowa będzie brzydka i frustrująca dla wielu użytkowników. (Na przykład: przeglądarki stacjonarne w nie pełnoekranowych oknach, duże tablety).
ʇsәɹoɈ 21.04.16
31

Oto jak to zrobić w JavaScript:

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

Zobacz przykład na www.tablemaker.net/test/mobile.html, gdzie trzykrotnie zwiększa rozmiar czcionki w telefonach komórkowych.

Ed Poor
źródło
jeśli chcesz połączyć swoje konta, zobacz tutaj: meta.stackexchange.com/questions/18232/...
Brandon
To nie zadziała, jeśli chodzi o tablet (np. IPad)
Si8
Użyj „mobi” z powodu Opera Mobile.
mgutt
1
Potrzebujesz „Opera Mini”, ponieważ jest to jedna z niewielu przeglądarek, które nie używają „mobi” w User Agent.
mgutt
17

Moim ulubionym mechanizmem wykrywania mobilnej przeglądarki jest WURFL . Jest często aktualizowany i działa z każdą większą platformą programistyczną / językową.

Pablo Santa Cruz
źródło
To dobrze, ale stwierdzenie „działa z każdą większą platformą programistyczną / językową” jest nieco odważne.
Kyle
8
To także nie jest już darmowe .
MarkJ
Jest on teraz dostępny tylko na nieznośnej licencji AGPL, chyba że go kupisz. en.wikipedia.org/wiki/WURFL#License_update
MarkJ
17

Czy rozważałeś użycie zapytań o media css3? W większości przypadków możesz zastosować niektóre style css specjalnie dla docelowego urządzenia bez konieczności tworzenia osobnej mobilnej wersji witryny.

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

Możesz ustawić szerokość na dowolną, ale 1025 złapie widok poziomy iPada.

Będziesz także chciał dodać następujący metatag do swojej głowy:

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

Sprawdź ten artykuł w HTML5 Rocks, aby znaleźć kilka dobrych przykładów

Cory
źródło
1
Myślę, że to naprawdę najlepsza droga. Skrypty, które patrzą na ciągi agenta użytkownika, powinny zostać zaktualizowane. Patrzenie na dostępną nieruchomość ekranu pozwala na responsywne projektowanie bez obawy, że nowe urządzenia nie zostaną wykryte.
Adam Tuttle
1
Działa to tylko w przypadku wykrywania po stronie klienta. Ale jeśli chcesz, aby twoja strona serwera zachowywała się inaczej w przypadku klientów mobilnych, musisz użyć innej techniki.
Igor Brejc
Nie udaje się to w przypadku przeglądarek komputerowych, które nie działają na pełnym ekranie. Jeśli zdecydujesz się to zrobić, nie marnuj miejsca na ekranie za pomocą ogromnych czcionek i marginesów, ani nie ukrywaj ważnych funkcji / informacji za rozwijanymi menu. Sprawi, że Twoja witryna / aplikacja będzie brzydka i frustrująca dla niektórych użytkowników.
ʇsәɹoɈ
13

dla 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>
Jorgesys
źródło
Uważam to za bardzo pomocne.
bozdoz
Zdecydowanie powinieneś sprawdzić Conditionizr, który poradzi sobie z tym wszystkim! Możesz dodawać testy niestandardowe, pobierać je za pomocą testów obiektowych i wywoływać wywołania zwrotne. Mają też do dyspozycji szereg gotowych testów: conditionizr.com/detects
Halcyon991
Elenasys, dziękuję za przydatną odpowiedź. Chociaż nie mogę znaleźć żadnego UA pasującego do „windows \ sce” w mojej db.
nefski
1
To nie działa na telefonach z systemem Windows.
jwerre
dziękuję, ale Windows Phone nie został określony ...
Jorgesys,
6

Plik przeglądarki urządzeń mobilnych to świetny sposób na wykrycie mobilnych (i innych) przeglądarek dla projektów ASP.NET: http://mdbf.codeplex.com/

mjf
źródło
Czy przeglądarka urządzeń mobilnych nadal działa? Zauważam, że istnieje notatka o tym, że jest offline? ...
creativeedg10,
5

Możesz po prostu wykryć klientów mobilnych navigator.userAgenti załadować alternatywne skrypty na podstawie wykrytego typu klienta jako:

 $(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
    }

    });
Sohel Khalifa
źródło
Aby uzyskać łatwiejsze do rozwiązania rozwiązanie, możesz użyć Conditionizr, który poradzi sobie z tym wszystkim! Możesz dodawać testy niestandardowe, pobierać je za pomocą testów obiektowych i wywoływać wywołania zwrotne. Mają też do dyspozycji szereg gotowych testów: conditionizr.com/detects
Halcyon991
4

Możesz sprawdzić ciąg User-Agent. W JavaScript jest to bardzo proste, to tylko właściwość obiektu nawigatora.

var useragent = navigator.userAgent;

Możesz sprawdzić, czy urządzenie, czy iPhone lub Blackberry w JS z czymś takim

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

jeśli isIphone jest prawdą, uzyskujesz dostęp do witryny z iPhone'a, jeśli isBlackBerry uzyskujesz dostęp do strony z Blackberry.

Możesz użyć wtyczki „UserAgent Switcher” dla Firefoxa, aby to przetestować.

Jeśli jesteś również zainteresowany, może warto sprawdzić mój skrypt „redirection_mobile.js” hostowany na github tutaj https://github.com/sebarmeli/JS-Redirection-Mobile-Site i możesz przeczytać więcej szczegółów w jednym z mój artykuł tutaj:

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

sebarmeli
źródło
1
Niepoprawne jest użycie .match, chcesz użyć .test (), który zwraca wartość logiczną, jest również znacznie szybszy niż .match () i nie zwraca tablicy. Dla łatwiejszego rozwiązania dla użytkownikaAgent testowanie, możesz użyć Conditionizr, który zajmie się tym wszystkim za Ciebie! Możesz dodawać testy niestandardowe, pobierać je za pomocą testów obiektowych i wywoływać wywołania zwrotne. Mają też do dyspozycji szereg gotowych testów: conditionizr.com/detects
Halcyon991
4
protected void Page_Load(object sender, EventArgs e)
{
    if (Request.Browser.IsMobileDevice == true)
    {
        Response.Redirect("Mobile//home.aspx");
    }
}

Ten przykład działa w asp.net

Shiv
źródło
3

Nie powiedziałeś, jakiego języka używasz. Jeśli to Perl, to jest trywialny:

use CGI::Info;

my $info = CGI::Info->new();

if($info->is_mobile()) {
   # Add mobile stuff
}

unless($info->is_mobile()) {
   # Don't do some things on a mobile
}
Nigel Horne
źródło
Jakiego modułu użyć: neilb.org/reviews/user-agent.html
Jonas G. Drange
0

Tak, klient użytkownika służy do wykrywania przeglądarek mobilnych. Dostępnych jest wiele bezpłatnych skryptów, które mogą to sprawdzić. Oto jeden taki kod php, który pomoże Ci przekierować użytkowników mobilnych na inną stronę.

Shoban
źródło
1
Czy można tego dokonać na warstwie serwera WWW (Apache) za pomocą jakiegoś polecenia .htaccess - zamiast PHP?
0

Złożyłem to demo ze skryptami i przykładami zawartymi razem:

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

Ten przykład wykorzystuje funkcje php do wykrywania agenta użytkownika i oferuje dodatkową korzyść polegającą na tym, że pozwala użytkownikom określić preferencje dotyczące wersji witryny, która zazwyczaj nie byłaby domyślna w zależności od przeglądarki lub typu urządzenia. Odbywa się to za pomocą plików cookie (utrzymywanych przy użyciu php po stronie serwera w przeciwieństwie do javascript).

Pamiętaj, aby sprawdzić link do pobrania w artykule przykładów.

Mam nadzieję, że ci się podoba!

Michael Lynn
źródło
0

MobileESP ma haki PHP, Java, APS.NET (C #), Ruby i JavaScript. ma również licencję Apache 2, więc jest bezpłatna do użytku komercyjnego. Najważniejsze dla mnie jest to, że identyfikuje tylko przeglądarki i platformy, a nie rozmiary ekranów i inne parametry, co sprawia, że ​​jest miły i mały.

obrabować
źródło