1

デスクトップ、タブレット、電話のブラウザで使用されているWebアプリケーションがあります。タブレットやデスクトップで使用する場合のツールバー（HTML製）には、16 x 16のボタンが必要であり、電話では48x48のボタンが必要です。この理由は、16 x 16はデスクトップとタブレットでは適切なサイズとして表示されますが、電話（iPhone 4 / 4sなど）では小さすぎるためです。48 x 48はデスクトップとタブレットでは大きすぎますが、テストした電話では完璧です。

Javascriptを使用してこれに必要な検出を行うにはどうすればよいですか？

物理的な画面サイズをインチまたはミリメートルで検出するのが良い方法だと思います。これはブラウザ内から可能ですか？ピクセル単位の画面解像度の検出に関する情報を見てきましたが、携帯電話とタブレットの解像度の境界がぼやけているため、欠陥があるように見えます。

ブラウザ内からタブレットを検出するための最も信頼できる方法は何ですか？

iPad 2、Androidタブレット、Androidエミュレーターを使用してテストしています。

4

3 に答える 3

2

CSS3メディアクエリは、デバイス幅（画面幅を意味する）を識別するためにうまく機能し、ジェレミーキースが彼のジャーナルからのこの投稿で議論しているJavaScriptでそれらにフックするためのいくつかの興味深いテクニックがあります。一般的な考え方は、レンダリングされないcssルールをメディアクエリ内に配置し、JavaScriptを介してそのcss値を取得して、どのメディアクエリが有効であるかを判断することです。これにより、デバイスの幅の範囲が識別され、表示しているデバイスの種類について結論を導き出すことができます。

于 2012-05-11T03:09:31.987 に答える
1

メディアクエリソリューションは優れたソリューションですが、CSSをソリューションに統合したくない場合、質問にあるようにJS（のみ）を使用すると、JavaScriptを使用してデバイスがタブレットかどうかを検出できるはずです。 。 電話。これは、window.orientationを画面の幅と高さの比率と組み合わせて使用​​してデフォルトの向きを検出することで実行できます。 

if (window.oriention == 0){            // this is the device's default orientation
    if (screen.width > screen.height) //means  default orientation is landscape
        isPhoneFormFactor = false;
}

ロジックは、幅が高さよりも大きいデバイスのデフォルトの向きは、携帯電話デバイスではなくタブレットである可能性が高いということです。

さらに正確にするには、画面の幅と高さの比率を計算し、それが特定のしきい値を超えていることを確認して、仮定をより正確にし、さらにロジックを追加してさらに正確にする必要があります。

于 2012-09-26T06:46:30.293 に答える
0

当初、私が知る必要があるのはWebアプリケーションが実行されているデバイスの種類であると考えていましたが、その後、デバイスの物理的な画面サイズを知る必要があると考えました。私は今、実際に関連しているのはデバイスのDPIだと思います。

デスクトップモニター（通常は150 DPIをはるかに下回る）やiPad 2（132 DPI）などの低解像度デバイスでは、16 x 16ボタンが適切なサイズですが、Retinaディスプレイを備えたiPhoneなどの高解像度デバイスでは（ 326 DPI）、16 x 6 16が小さすぎるため、48x48ボタンの方が適しています。

メディアクエリを実行する機能を備えたModernizrを使用すると、Javascriptコードを使用してデバイスの画面解像度を決定できます。.mq()

var isHighResolutionDisplay = Modernizr.mq("screen and (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 250dpi)");

このページには、さまざまなデバイスとそのピクセル密度のすばらしいリストがあります。

于 2012-05-15T00:04:49.500 に答える