7

エンド ユーザーが電話、タブレット、または PC を使用しているかどうかを検出しようとしています。

私はしばらくの間グーグルをしてきましたが、明らかに簡単な解決策はありません。

最近のタブレットの中には素晴らしい解像度を持っているものがあるので、私は解像度を使用すべきではないと思います。

Windows8 ラップトップはタブレットのように回転できるため、向きに依存するべきではありません。(レスポンシブ デザインは、現在のプロジェクトでは難しすぎる)

私は UserAgent を使用しようとしましたが (欠点もあると思います)、動作させることができません。以下は、電話/タブレットと PC を区別するために使用しているオンラインのさまざまなバージョンの組み合わせです。動作せず、理由がわかりません

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;
            }
4

4 に答える 4

12

はい、解像度や向きに頼るべきではありません。しかし、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.
}
于 2013-02-27T00:05:09.420 に答える
3

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

-編集して追加--

また、ユーザーがどのデバイスを使用しているのかを実際に気にする理由を自問する必要があることも強調したいと思います。利用可能なすべての機能を検出するよりも、関心のある特定の機能を検出する方がはるかに簡単です。

于 2013-02-26T23:02:34.903 に答える
2

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

レスポンシブ デザインの背後にある思考プロセスに関するいくつかの優れた記事。

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

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

何を達成しようとしているのかという疑問が残ります。

于 2013-02-26T23:10:58.067 に答える
-1

指定されたリストに対してエージェントの一致が機能しない理由の簡単な回答: 「Android」は返された (エージェント) 文字列にありません! 指定された文字列はどれも正しくなく、嘘つきがたくさんいると仮定してください。

Android ケースを証明するテスト済みのコードを投稿しました。

于 2013-09-05T03:32:11.640 に答える