モバイルブラウザの自動検出（ユーザーエージェント経由？）[終了]
https://stackoverflow.com/questions/1005153
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
ユーザーがWebサイトをモバイルWebブラウザーから表示しているかどうかを検出して、適切なバージョンのWebサイトを自動検出して表示するにはどうすればよいですか？
解決
はい、User-Agentヘッダーを読み取るとうまくいきます。
リスト out には既知のモバイルユーザーエージェントが含まれているため、最初から始める必要はありません。私がしなければならなかったのは、既知のユーザーエージェントのデータベースを構築し、リビジョンが検出されたときにそれらを保存し、それらが何であるかを手動で把握することでした。この最後のことは、場合によってはやり過ぎかもしれません。
Apacheレベルで実行する場合は、ユーザーエージェントをチェックする一連の書き換えルールを定期的に生成するスクリプトを作成できます（または、一度だけ新しいユーザーエージェントを忘れるか、月に1回、状況に応じて） ）、のような
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1
たとえば、 http：//domain/index.html へのリクエストを http：//domain/mobile/index.html
スクリプトでhtaccessファイルを定期的に再作成する方法が気に入らない場合は、ユーザーエージェントをチェックするモジュールを作成できます（作成済みのものは見つかりませんでしたが、これは特に適切な例）を実行し、一部のサイトからユーザーエージェントを取得して更新します。その後、必要に応じてアプローチを複雑にすることができますが、あなたの場合、以前のアプローチは問題ないと思います。
他のヒント
モバイルブラウザを検出には、Apache、ASP、ColdFusion、JavaScript、およびPHPでこれを行うオープンソーススクリプトがあります。
考えてみてください。この問題を反対方向から処理した場合はどうなりますか？どのブラウザがモバイルであるかを判断するのではなく、どのブラウザがモバイルではないのかを判断してください。次に、サイトをデフォルトでモバイルバージョンにコーディングし、標準バージョンにリダイレクトします。モバイルブラウザを見るとき、2つの基本的な可能性があります。 Javascriptがサポートされているか、サポートされていません。そのため、ブラウザがjavascriptをサポートしていない場合、デフォルトでモバイルバージョンになります。 JavaScriptがサポートされている場合は、画面サイズを確認してください。特定のサイズよりも小さいものはすべて、モバイルブラウザにもなります。それより大きいものは、標準レイアウトにリダイレクトされます。あとは、JavaScriptを無効にしたユーザーがモバイルかどうかを判断するだけです。
W3Cによると、JavaScriptが無効になっているユーザーの数は約5％であり、ほとんどのユーザーがJavaScriptをオフにしています。彼らはあなたの聴衆の大部分ですか？そうでなければ、それらについて心配しないでください。もしそうなら、最悪のシナリオは何ですか？これらのユーザーはサイトのモバイル版を閲覧していますが、それは良いことです。
JavaScriptで行う方法は次のとおりです。
function isMobile() {
var index = navigator.appVersion.indexOf("Mobile");
return (index > -1);
}
www.tablemaker.net/test/mobile.html の例を参照してください携帯電話のフォントサイズが3倍になります。
私のお気に入りのモバイルブラウザ検出メカニズムは、 WURFL です。頻繁に更新され、すべての主要なプログラミング/言語プラットフォームで動作します。
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でご覧くださいいくつかの良い例のために
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>
モバイルデバイスブラウザーファイルは、ASP.NETプロジェクトのモバイル（およびその他の）ブラウザーを検出する優れた方法です。 http： //mdbf.codeplex.com/
単に 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
}
});
User-Agent文字列を確認できます。 JavaScriptでは、これは非常に簡単で、ナビゲーターオブジェクトのプロパティにすぎません。
var useragent = navigator.userAgent;
デバイスがJSのiPhoneまたはBlackberryであるかどうかを確認できます
var isIphone = !!agent.match(/iPhone/i),
isBlackberry = !!agent.match(/blackberry/i);
isIphoneがtrueの場合、Iphoneからサイトにアクセスしています。isBlackBerryの場合、Blackberryからサイトにアクセスしています。
「UserAgent Switcher」を使用できます。 Firefoxのプラグインでテストします。
も興味があるなら、ここのgithubでホストされている私のスクリプト＆quot; redirection_mobile.js＆quot; をチェックする価値があるかもしれません https://github.com/sebarmeli/JS- Redirection-Mobile-Site 。詳細については、こちらの記事のいずれかをご覧ください：
protected void Page_Load(object sender, EventArgs e)
{
if (Request.Browser.IsMobileDevice == true)
{
Response.Redirect("Mobile//home.aspx");
}
}
この例はasp.netで機能します
使用している言語を言っていません。 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
}
はい、user-agentはモバイルブラウザの検出に使用されます。これを確認するために利用できる無料のスクリプトがたくさんあります。以下に、モバイルユーザーを別のWebサイトにリダイレクトするのに役立つ phpコードを示します。
このデモでは、スクリプトと例が一緒に含まれています。
http：// www。 mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/
この例では、ユーザーエージェントの検出にphp関数を使用し、ブラウザーまたはデバイスの種類に応じて通常は既定ではないサイトのバージョンの優先順位をユーザーが指定できるという追加の利点を提供します。これは、cookieを使用して行われます（javascriptではなく、サーバー側でphpを使用して維持されます。）
例については、記事のダウンロードリンクを確認してください。
お楽しみください！
MobileESP には、PHP、Java、APS.NET（C＃）、RubyおよびJavaScriptフックがあります。 また、Apache 2のライセンスもあるため、無料で商用利用できます。 私にとって重要なことは、画面サイズやその他のメトリックではなく、ブラウザとプラットフォームのみを識別することです。
Zend Frameworkを使用したまったく新しいソリューションがあります。 Zend_HTTP_UserAgentへのリンクから開始します。
