web-dev-qa-db-ja.com

モバイルブラウザを自動検出（ユーザーエージェント経費で）

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

htmlwindows-mobilebrowseruser-agent
290
TeddyTom

はい、User-Agentヘッダを読むことでうまくいくでしょう。

listsout という既知のモバイルユーザーエージェントがいくつかあるので、最初から始める必要はありません。私がしなければならなかったのは、既知のユーザエージェントのデータベースを構築し、それらが改訂のために検出されたときに未知のものを格納し、次にそれらが何であるかを手動で把握することです。この最後のことは、場合によってはやり過ぎるかもしれません。

Apacheレベルでそれをしたい場合は、ユーザーエージェントをチェックする一連の書き換えルールを定期的に生成するスクリプトを作成することができます。

RewriteEngine On

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

これは、例えば http://domain/index.html へのリクエストを http：// domain/mobile /に移動します。 index.html

スクリプトにhtaccessファイルを定期的に再作成させるというアプローチが気に入らない場合は、ユーザーエージェントをチェックするモジュールを作成できます（作成済みのものは見つかりませんでしたが、これが特に適切であることがわかりました example ）し、それらを更新するためにいくつかのサイトからユーザエージェントを取得します。そうすればあなたが望むだけアプローチを複雑にすることができます、しかし私はあなたのケースでは前のアプローチは大丈夫だろうと思います。

91
Vinko Vrsalovic

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

126
Chad Smith

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

33
midsever

JavaScriptでこれを行う方法は次のとおりです。

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

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

31
Ed Poor

あなたは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で この記事 をチェックしてください。

17
Cory

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

17
Pablo Santa Cruz

Android、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>
13
Elenasys

モバイルデバイスブラウザファイルは、ASP.NETプロジェクトのモバイル（およびその他の）ブラウザを検出するのに最適な方法です。 http://mdbf.codeplex.com/

6
mjf

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
    }

    });
5
sohel khalifa

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

var useragent = navigator.userAgent;

IPhoneやBlackberryならJSで何かデバイスを使って確認できます

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

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

あなたはそれをテストするためにFirefox用の "UserAgent Switcher"プラグインを使うことができます。

あなたも興味があるなら、githubでホストされている私のスクリプト "redirection_mobile.js"をチェックする価値があるかもしれませんhttps://github.com/sebarmeli/JS-Redirection-Mobile-Siteを参照してください。詳細については、私の記事の1つを参照してください。

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

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

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

4
shiv

あなたはあなたが使っている言語は何も言っていません。 Perlなら、それは自明です：

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
}
3
Nigel Horne

このデモでは、スクリプトと例をまとめています。

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

この例では、ユーザーエージェントの検出にphp関数を利用しており、通常はユーザーのブラウザやデバイスの種類に基づくデフォルトではないバージョンのサイトをユーザーが選択できるようにしています。これはクッキーを使って行われます（javascriptではなくサーバーサイドでphpを使って管理されています）。

例の記事のダウンロードリンクをチェックしてください。

あなたが楽しむことを願っています！

0
Michael Lynn

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

0
Shoban

MobileESP には、PHP、Java、APS.NET（C＃）、Ruby、およびJavaScriptのフックがあります。 Apache 2ライセンスもあり、商用利用は無料です。私にとって重要なことは、画面サイズやその他の測定基準ではなく、ブラウザとプラットフォームのみを識別することです。

0
rob