モバイルユーザーの自動検出(ユーザーエージェント経由?)[終了]


291

ユーザーがモバイルWebブラウザーからWebサイトを表示しているかどうかを検出して、適切なバージョンのWebサイトを自動検出して表示するにはどうすればよいですか?


12
iPadは重要ですか?:)
Seva Alekseyev 2010年

33
セヴァのコメントは良い質問を引き起こします。今日の「モバイル」とはどういう意味ですか?それはブラウザを持っているがそれほど多くはない「フィーチャーフォン」を指しているのでしょうか?入力方法とディスプレイ解像度が制限要因となるフル機能のスマートフォンを指しますか?簡単に操作でき、高解像度のディスプレイを備えたタブレットはどうですか?メディアセンターなどのデバイスはどうですか。リビングルームを離れることはありませんが、同様の制限があります。職場の友人から送られてきました。私はそれが非常に洞察に満ちていると思いました。 slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
spaaarky21

1
@Rickiですが、iPadでは、フラッシュコンテンツを表示したり、tinymceなどのJavaScriptベースのリッチテキストエディターを使用したりすることはできません。
TJエリス

1
iPadはフラッシュを表示できませんが、ブラウザーがフラッシュをサポートしているかどうかを検出するなど、別のトピックです。
Shaun、

2
未来からの投稿にすぎませんが、サイトのモバイルバージョンの配信に関心のある方は、「レスポンシブデザイン」に関する記事に興味があるかもしれません。
Vael Victus 2012

回答:


91

はい、User-Agentヘッダーを読み取るとうまくいきます。

いくつかありますリストが 出て、あなたがゼロからスタートする必要はありませんので、そこに知られているモバイルユーザーエージェントの。私がしなければならなかったときに私がしたことは、既知のユーザーエージェントのデータベースを構築し、それらが修正のために検出されたときに未知のものを保存し、手動でそれらが何であるかを理解することです。この最後のことは、場合によってはやり過ぎかもしれません。

Apacheレベルで実行したい場合は、次のように、ユーザーエージェントをチェックする一連の書き換えルールを定期的に生成するスクリプトを作成できます(または一度だけ新しいユーザーエージェントを忘れるか、月に1回)。

RewriteEngine On

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

これにより、たとえば、http://domain/index.htmlへのリクエストがhttp://domain/mobile/index.htmlに移動ます。

スクリプトでhtaccessファイルを定期的に再作成する方法が気に入らない場合は、ユーザーエージェントをチェックするモジュールを作成して(既に作成したものは見つかりませんでしたが、この特に適切な例を見つけました)、ユーザーエージェントを取得できます。それらを更新するいくつかのサイトから。そうすれば、アプローチを好きなだけ複雑にすることができますが、私はあなたの場合、以前のアプローチで問題ないと思います。


3
これは、PHPのようなスクリプト言語を使用する代わりに、何らかのタイプの.htaccessコマンドを使用してWebサーバー層(Apache)で実現できますか?

ユーザーエージェントによってドキュメントルートを設定するアイデア
Carson

126

Detect Mobile Browserには、Apache、ASP、ColdFusion、JavaScript、PHPでこれを行うオープンソーススクリプトがあります。


5
@guitarその場合は、UAを送信する必要があります。
Adam Tuttle、2011年

9
Bleh ...私はこれらのソリューションの「コードのにおい」が本当に嫌いです。一連の4文字の接頭辞を使用した正規表現マッチング。最初にどこから来たかについての手がかりはありません...いいえ。
私たちは全員モニカです

2
それは、1つの危険な正規表現です。私は同意します、コードのにおいはこれで良くありません。
Jack Cox

5
私は、ライセンスがなく、アップデートの表示がない「オープンソース」ソリューションは好きではありません。
エドゥアルド

12
それを回避する方法はありません。あるレベルでは、あらゆるタイプのソリューションがユーザーエージェントに対して正規表現チェックを実行します。
カイル

33

考えただけですが、この問題を反対方向から取り組んだ場合はどうでしょうか。どのブラウザがモバイルであるかを判断するのではなく、どのブラウザがモバイルではないかを判断しませんか?次に、サイトをコーディングしてデフォルトでモバイルバージョンに設定し、標準バージョンにリダイレクトします。モバイルブラウザを見る場合、2つの基本的な可能性があります。JavaScriptのサポートがあるか、ないかのどちらかです。したがって、ブラウザがJavaScriptをサポートしていない場合は、デフォルトでモバイルバージョンになります。JavaScriptがサポートされている場合は、画面サイズを確認してください。特定のサイズを下回るものは、おそらくモバイルブラウザーでもあります。大きいものはすべて標準レイアウトにリダイレクトされます。次に、JavaScriptを無効にしたユーザーがモバイルかどうかを判断するだけです。
W3Cによると、JavaScriptが無効になっているユーザーの数は約5%で、それらのユーザーのほとんどが無効にしています。これは、ブラウザーで何をしているのか実際に知っていることを意味します。彼らはあなたの聴衆の大部分ですか?そうでない場合は、それらについて心配する必要はありません。もしそうなら、最悪のシナリオは何ですか?あなたのサイトのモバイル版を閲覧しているユーザーがいて、それは良いことです。


3
これは非常に良いアイデアです。エレガントなソリューションだと思います。
Maxim Veksler、2010年

3
+1これはかなりいいアイデアのように聞こえますが、これは検索エンジンのクローラーに影響しますか?
Mikey G

これは見当違いの考えです。JavaScriptを無効にするブラウザー拡張機能は、デスクトップブラウザーで非常に人気があるため、JavaScriptがないと仮定すると、モバイルがまったく間違っていることを意味しています。ウィンドウ/ビューポート/画面の解像度はブラウザーのサイズとは関係ありません。また、低解像度がハンドヘルドのサイズを示していると仮定すると、Webアプリが醜く、多くのユーザーを苛立たせます。(例:非フルスクリーンウィンドウのデスクトップブラウザー、大きなタブレット。)
ʇsәɹoɈ16年

31

JavaScriptでの実行方法は次のとおりです。

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

www.tablemaker.net/test/mobile.htmlで、携帯電話のフォントサイズを3倍にする例をご覧ください。


あなたのアカウントをマージしたい場合はこちらを参照してください。meta.stackexchange.com/questions/18232/...
ブランドン

タブレット(iPadなど)の場合、これは機能しません
Si8

Opera Mobileのため、「mobi」を使用してください。
mgutt 2015

1
また、ユーザーエージェントで「mobi」を使用していないまれなブラウザーの1つであるため、「Opera Mini」が必要です。
mgutt 2015

17

私のお気に入りのモバイルブラウザー検出メカニズムはWURFLです。それは頻繁に更新され、すべての主要なプログラミング/言語プラットフォームで動作します。


それは良いですが、「すべての主要なプログラミング/言語プラットフォームで機能します」という文は少し大胆です。
カイル


購入しない限り、厄介なAGPLライセンスの下でのみ利用できます。en.wikipedia.org/wiki/WURFL#License_update
MarkJ

17

css3メディアクエリの使用を検討しましたか?ほとんどの場合、サイトのモバイルバージョンを個別に作成しなくても、ターゲットデバイス専用の一部のCSSスタイルを適用できます。

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

幅は好きなように設定できますが、1025はiPadの横向きのビューをキャッチします。

次のメタタグを頭に追加することもできます。

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

いくつかの良い例については、この記事をHTML5 Rocksでチェックしてください。


1
これが実際に行く最良の方法だと思います。ユーザーエージェントの文字列を参照するスクリプトは、古くなっています。利用可能な画面領域を確認することで、新しいデバイスが検出されないという心配をせずにレスポンシブデザインを実現できます。
アダムタトル

1
これはクライアント側の検出でのみ機能します。ただし、サーバー側でモバイルクライアントの動作を変更する場合は、他の方法を使用する必要があります。
Igor Brejc 2013年

これは、フルスクリーンで実行されていないデスクトップブラウザーの場合、ひどく失敗します。とにかくそれを行うことを選択した場合は、巨大なフォントとマージンで画面スペースを無駄にしないか、またはドロップダウンメニューの背後に重要な機能/情報を隠さないでください。それはあなたのサイト/アプリを醜く、一部のユーザーにイライラさせます。
ʇsәɹoɈ

13

以下のためのアンドロイド、IPHONE、IPAD、ブラックベリー、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>

これはとても役に立ちました。
bozdoz 2013

あなたは間違いなくこれをすべて処理するConditionizrをチェックするべきです!カスタムテストを追加し、オブジェクトテストを介してフェッチし、コールバックを行うことができます。:彼らは利用できる既成のテストの範囲も持っているconditionizr.com/detects
Halcyon991

Elenasys、役立つ回答をありがとうございます。ただし、dbで "windows \ sce"に一致するUAが見つかりません。
ネフスキー2014

1
これはWindows Phoneでは機能しません。
jwerre

ありがとうございますが、Windows Phoneは指定されていません...
Jorgesys、

6

モバイルデバイスブラウザのファイルは、ASP.NETのプロジェクトのためのモバイル(およびその他)broswersを検出するための素晴らしい方法です。http://mdbf.codeplex.com/


モバイルデバイスブラウザーはまだ機能していますか?オフラインになるという表記があることに気づきましたか?
creativeedg10

5

だけでモバイルクライアントを検出 navigator.userAgentし、検出されたクライアントタイプに基づいて次のように代替スクリプトをロードできます。

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

    });

より管理しやすい解決策として、すべてを処理するConditionizrを使用できます!カスタムテストを追加し、オブジェクトテストを介してフェッチし、コールバックを行うことができます。:彼らは利用できる既成のテストの範囲も持っているconditionizr.com/detects
Halcyon991

4

User-Agent文字列を確認できます。JavaScriptでは、これは非常に簡単で、ナビゲーターオブジェクトのプロパティにすぎません。

var useragent = navigator.userAgent;

あなたはのようなものでJSまたはJSのiPhoneまたはBlackberryかどうかデバイスを確認することができます

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

isIphoneがtrueの場合はIphoneからサイトにアクセスし、isBlackBerryの場合はBlackberryからサイトにアクセスします。

Firefoxの「UserAgent Switcher」プラグインを使用してテストできます。

興味がある場合は、https://github.com/sebarmeli/JS-Redirection-Mobile-Siteの githubでホストれている私のスクリプト"redirection_mobile.js"をチェックしてみるとよいでしょう。詳細については、ここに私の記事:

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


1
ここで.matchの使用は間違っています。ブール値に評価される.test()を使用する必要があります。また、.match()よりもはるかに高速で、配列を返しません。userAgentテストのより管理しやすい解決策として、Conditionizrを使用してこれをすべて処理できます。カスタムテストを追加し、オブジェクトテストを介してフェッチし、コールバックを行うことができます。:彼らは利用できる既成のテストの範囲も持っているconditionizr.com/detects
Halcyon991

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

この例はasp.netで動作します



0

はい、ユーザーエージェントはモバイルブラウザの検出に使用されます。これをチェックするために利用できる無料のスクリプトがたくさんあります。これは、モバイルユーザーを別のWebサイトにリダイレクトするのに役立つ、そのようなphpコードの 1つです。


1
これは、PHPを使用する代わりに、何らかのタイプの.htaccessコマンドを使用してWebサーバー層(Apache)で実行できますか?

0

このデモにスクリプトと例を一緒に含めました。

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

この例では、ユーザーエージェントの検出にphp関数を使用し、ユーザーがブラウザーまたはデバイスタイプに基づいて通常はデフォルトではないサイトのバージョンの設定を指定できるという追加の利点を提供します。これはCookieを使用して行われます(javascriptではなくサーバー側でphpを使用して維持されます)。

例については、記事のダウンロードリンクを確認してください。

お楽しみください!


0

MobileESPには、PHP、Java、APS.NET(C#)、Ruby、JavaScriptフックがあります。また、Apache 2ライセンスがあるため、商用利用は無料です。私にとって重要なことは、ブラウザとプラットフォームのみを識別し、画面サイズやその他のメトリックを識別しないことです。


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.