ユーザーが Android ブラウザーと iOS ブラウザーのどちらで表示しているかに応じて、モバイル Web サイトのボタンとテキストを変更する必要があります。チェックを実行する信頼できる方法はありますか?
4 に答える
var isMobile = {
Windows: function() {
return /IEMobile/i.test(navigator.userAgent);
},
Android: function() {
return /Android/i.test(navigator.userAgent);
},
BlackBerry: function() {
return /BlackBerry/i.test(navigator.userAgent);
},
iOS: function() {
return /iPhone|iPad|iPod/i.test(navigator.userAgent);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
}
};
プロパティを使用しnavigator.useragent
て useragent-string を取得し、解析して OS を検出します。
これを行う方法の一例を次に示します。
アップデート:
この質問は人気があるため、回答に追加情報を追加すると思いました。
一般に、ブラウザ スニッフィングが最善の方法になることはほとんどありません。なんで?理由はたくさんありますが、ここでは2つの良い理由を紹介します。
- 人々がブラウザ スニッフィングを利用する場合、ほとんどの場合、機能検出の方が適しています。ユーザーが使用している可能性のある OS/ブラウザーに応じて対処することが適切である可能性があるまれなエッジ ケースがありますが、ほとんどの場合、Modernizrのようなライブラリを使用して特定の機能のサポートを検出する方が適切な方法です。サイトやアプリケーションを特定のブラウザーがサポートする機能ではなく、特定のブラウザーに適応させようとするのは、滑りやすい坂道です。代わりに、ブラウザーが必要な機能をサポートしているかどうかを確認し、サポートが不足している場合は、ポリフィルまたは適切なフォールバックを提供してください。
- ブラウザ スニッフィングは非常に複雑です。なんで?ほとんどすべてのブラウザは、ユーザー エージェント文字列に嘘をついているか、特定の識別を可能にする十分な情報を欠いているためです。
そうは言っても、本当にブラウザー/OS 検出を使用する必要がある場合は、車輪を再発明したり、自分でやろうとしたりしないでください。苦痛とあいまいな警告の世界に直面することになります! OS、ブラウザ、レンダリング エンジン、デバイスに関する情報を含む便利な JavaScript オブジェクトを提供する、WhichBrowserのようなライブラリを使用することをお勧めします。
ナビゲーター オブジェクトを使用できます: http://www.w3schools.com/js/js_browser.aspそして、ナビゲーターのプロパティに基づく if ステートメントを使用します。
私はこれをしばらく使用しました。モバイル デバイスに基づいて true または false が返されることを確認するための簡単なチェック。
var isMobile = (/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Windows Phone/i.test(navigator.userAgent)) ? true : false;