私は、エンドユーザーは、電話で私はしばらくの間、グーグルでされているタブレットやPC</p> <p>であるかどうかを検出しようとしていますJavaScriptの

Question

を使用して携帯電話/タブレット/ Webクライアントを検出し、明らかに簡単な解決策はありません。

私は決して解像度を使用すべきではないと思います。今日、いくつかのタブレットにはすばらしい解決策があります。

windows8ノートパソコンはタブレットのように回転するだけなので、私は向きに頼るべきではありません。 （私の現在のプロジェクトではレスポンシブルデザインが難しい）

私はUserAgentを使用しようとしていましたが（それには欠点があると思っていましたが）、それを稼働させることはできません。私はパソコンから携帯電話/タブレットを区別するために使用していますことを、彼らは動作しないと私は

var agents = ['android', 'webos', 'iphone', 'ipad', 'blackberry','iemobile','phone','mobile']; 
       for(i in agents) { 
        if(navigator.userAgent.toLowerCase().match('/'+agents[i]+'/i')) { 
         return true; 
        } 
       } 


if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { 
       return true; 
      } 

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) 
       || navigator.userAgent.match(/bada/i) 
       || navigator.userAgent.match(/Bada/i) 
       ){ 
       return true; 
      } 

Answer 1

はい、解像度や方向には依存しないでください。しかし、emベースのメディアクエリはどうですか？

JavaScriptを使用して、あなたのメディアクエリの結果を読み取るためには、あなたがあなたのページに目に見えないコンテンツを追加して、あなたのCSSにメディアクエリを追加してみてください：

@media all and (max-width: 45em) { 
    body:after { 
     content: 'smallscreen'; 
     display: none; 
    } 
} 

その後はJavaScriptを介してコンテンツをお読みください。

その後

var size = window.getComputedStyle(document.body,':after').getPropertyValue('content'); 

あなたが負荷に何をしたいかを決定：

if (size.indexOf('smallscreen') !=-1) { 
    // Load some content for smaller screens. 
} 

Answer 2

ユーザーエージェントはかなり信頼できない理由はわかりませんし、実際にクライアントによって偽造することができます。特定のデバイスではなく特定の機能に焦点を当てることをお勧めします。 Modernizerは、機能がクライアントデバイスで利用可能かどうかを検出するために使用できるライブラリです。これにより、ローカルストレージなどが利用可能かどうかを検出することができます。デバイス/クライアント固有の機能の代わりにResponsive Web Designのようなものに興味があるなら、TwitterのBootstrapのようなライブラリを使うことができます。 Scaffoldingページの下部には、解像度に基づいているとは思うが、電話とタブレットとデスクトップの検出を可能にするいくつかの機能もある。

をadd--する

--edit私はまた、あなたが実際にユーザーがオンになっているどのデバイスを気になぜあなたは自問しなければならないことを強調したいと思います。利用可能なすべての機能を検出するよりも、特定の機能を検出する方がはるかに簡単です。

Answer 3

メディアクエリと<viewport>タグを調べることをおすすめします。

レスポンシブデザインの思考プロセスに関する優れた記事です。

http://www.html5rocks.com/en/mobile/mobifying/

http://www.magazine.org/timecom-gm-craig-ettinger-bringing-responsive-web-design-iconic-brand

疑問が残る

、何を達成しようとしているの？

Answer 4

エージェントの一致が指定されたリストに対して機能しない理由、つまり「Android」は返された（エージェント）文字列に含まれていません。 指定された文字列のうちのどれも正しいものではなく、嘘つきがたくさんあると仮定します。

私はアンドロイドのケースを証明するテストコードを掲載しています。