7

クライアント側の JavaScript コードでデバイスを画面幅で分類したい

  • 片手に収まるすべてのデバイス (7 インチ未満) からモバイル カテゴリまで

  • 他のデバイスをデスクトップ デバイスとして扱う

  • フォールバック: 必要な API をサポートしていないデバイスをモバイル デバイスとして扱う

質問

  • 画面の物理的な寸法を検出するために使用できる、関連する JavaScript および CSS API はどれですか? 安全なフォールバックがあるため、これらの API は必ずしも古いブラウザーでサポートされる必要はないことに注意してください。また、従来のデスクトップ ブラウザーも気にしません。

互換性のある API が既にある場合、Firefox のサポートはオプションです。

これはピクセルの寸法ではなく、物理的な寸法に関するものであることに注意してください。

4

2 に答える 2

3

画面サイズをインチ単位で直接取得する方法はありませんが、画面密度を使用してデバイス サイズを見つける回避策があります。完全ではありませんが、有効数字 5 桁までの正確なサイズを知る必要はありません。また、通常は単純にピクセル値 IMO を使用することをお勧めします。

HTML

テスト div を作成し、表示されるピクセル数を確認してピクセル密度を取得し、それを計算に使用します。これは、ブラウザー/OS が適切に構成されていることを前提として機能するはずです (この質問では機能しませんでしたが、私のコンピューターでは 0.5 インチ以内でした)。

編集: これは 100% 間違っています。CSS のインチ/cm の測定値は、実際の物理的な測定値に基づいていません。これらは正確な変換 (1 インチ = 96 ピクセル、1 cm = 37.8 ピクセル) に基づいています。謝罪いたします。

CSS

物理的な画面サイズを検出する最良の方法は、CSS メディア クエリを使用することです。min-resolutionおよびmax-resolutionクエリを使用して、 または のいずれかで解決策を取得dpiできdpcmます。

@media (min-resolution: 300dpi){
  // styles
}

min-device-widthおよびクエリと組み合わせると、次のmax-device-widthようになります。

@media (resolution: 326dpi) and (device-width: 640) and (device-height: 960){
    // iPhone
}

問題は、7 インチのデバイスをターゲットにしたい場合、多くの解像度とそれに対応する幅を組み合わせる必要があり、複雑になる可能性があることです。

詳細については：

Javascript

window.devicePixelRatio画面密度を決定するために使用できます。Android の WebView リファレンスから:

window.devicePixelRatioDOM プロパティ。このプロパティの値は、現在のデバイスに使用されるデフォルトの倍率を指定します。たとえば、値window.devicePixelRatioが「1.0」の場合、デバイスは中密度 (mdpi) デバイスと見なされ、デフォルトのスケーリングは Web ページに適用されません。値が「1.5」の場合、デバイスは高密度デバイス (hdpi) と見なされ、ページ コンテンツは 1.5 倍にスケーリングされます。値が「0.75」の場合、デバイスは低密度デバイス (ldpi) と見なされ、コンテンツは 0.75x にスケーリングされます。

次に、これを使用して、これを合計ピクセル数で割って物理サイズを計算します。これはwindow.screen.widthandで計算できます (これらは使用可能な高さのみを検出するため、orwindow.screen.heightは使用しないでください)。window.screen.availHeightwindow.screen.availWidth

詳細については：

于 2014-01-02T18:07:10.897 に答える
-4

CSSを使ったほうがいい

@media screen and (max-width: 672px){
    //your code for mobile category
}
@media screen and (min-width: 672px){
    //your code for desktop category
}
于 2013-04-22T07:34:12.393 に答える