ユーザーがモバイルWebブラウザーからWebサイトを表示しているかどうかを検出して、適切なバージョンのWebサイトを自動検出して表示するにはどうすればよいですか?
ユーザーがモバイルWebブラウザーからWebサイトを表示しているかどうかを検出して、適切なバージョンのWebサイトを自動検出して表示するにはどうすればよいですか?
回答:
はい、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ファイルを定期的に再作成する方法が気に入らない場合は、ユーザーエージェントをチェックするモジュールを作成して(既に作成したものは見つかりませんでしたが、この特に適切な例を見つけました)、ユーザーエージェントを取得できます。それらを更新するいくつかのサイトから。そうすれば、アプローチを好きなだけ複雑にすることができますが、私はあなたの場合、以前のアプローチで問題ないと思います。
Detect Mobile Browserには、Apache、ASP、ColdFusion、JavaScript、PHPでこれを行うオープンソーススクリプトがあります。
考えただけですが、この問題を反対方向から取り組んだ場合はどうでしょうか。どのブラウザがモバイルであるかを判断するのではなく、どのブラウザがモバイルではないかを判断しませんか?次に、サイトをコーディングしてデフォルトでモバイルバージョンに設定し、標準バージョンにリダイレクトします。モバイルブラウザを見る場合、2つの基本的な可能性があります。JavaScriptのサポートがあるか、ないかのどちらかです。したがって、ブラウザがJavaScriptをサポートしていない場合は、デフォルトでモバイルバージョンになります。JavaScriptがサポートされている場合は、画面サイズを確認してください。特定のサイズを下回るものは、おそらくモバイルブラウザーでもあります。大きいものはすべて標準レイアウトにリダイレクトされます。次に、JavaScriptを無効にしたユーザーがモバイルかどうかを判断するだけです。
W3Cによると、JavaScriptが無効になっているユーザーの数は約5%で、それらのユーザーのほとんどが無効にしています。これは、ブラウザーで何をしているのか実際に知っていることを意味します。彼らはあなたの聴衆の大部分ですか?そうでない場合は、それらについて心配する必要はありません。もしそうなら、最悪のシナリオは何ですか?あなたのサイトのモバイル版を閲覧しているユーザーがいて、それは良いことです。
JavaScriptでの実行方法は次のとおりです。
function isMobile() {
var index = navigator.appVersion.indexOf("Mobile");
return (index > -1);
}
www.tablemaker.net/test/mobile.htmlで、携帯電話のフォントサイズを3倍にする例をご覧ください。
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">
以下のためのアンドロイド、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>
モバイルデバイスブラウザのファイルは、ASP.NETのプロジェクトのためのモバイル(およびその他)broswersを検出するための素晴らしい方法です。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または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"をチェックしてみるとよいでしょう。詳細については、ここに私の記事:
使用している言語を言っていません。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
}
このデモにスクリプトと例を一緒に含めました。
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へのリンクから開始します。