画面解像度でモバイルデバイスを検出するのはどの程度信頼できますか？

Question

これは少し良すぎて真実ではないので、そうであるかどうか教えてください。

モバイルWebサイトの1つのバージョンしかない場合（さまざまなデバイスのバリエーションがなく、すべてのモバイルに1つのWebサイトだけ）、画面解像度でモバイルデバイスを検出することはどの程度信頼できますか？

画面解像度が400pxよりも<よりもモバイルバージョンを提供します。

注：私の質問は、JavaScriptが有効になっていると仮定しています。また、ユーザーエージェントの検出があることも知っていますが、それなしでやりたいと思います。

Answer 1

メディアクエリを介してさまざまなスタイルシートを提供することを検討する必要があります。クエリを使用して画面幅を識別し、特定のデバイスに特定のCSSのみを提供できます。たとえば、このクエリは、iPhone.cssをiPhone.cssのみに提供します。

<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />

このテーマに関する詳細な記事があります アリスタパート

ただし、すべてのデバイスがメディアクエリを認識しているわけではないことに注意してください。 BlackBerryやFlip Phoneなどの多くの古いデバイスをサポートする必要がある場合は、UA検出を使用するために上記のアドバイスを取得する必要があります。私たちとモバイルWebは利用可能ですが、多くの点でまだ新しい地平線です。

Answer 2

JavaScriptモバイルデバイスの高さの画面検出は、まったく信頼できません。問題は、異なるブラウザが異なる量の「Chrome」を使用し、OSバージョンが異なるバージョンを使用してシステムバーに異なる高さを使用することです。すべての検出メカニズムは、高さ（screen.height、window.outerheight、window.innerheightなど）について不当に報告します。

幅は、すべてのOSのwindow.outerwidthで最も信頼性が高いようです。

ここで最も優れた分析レポートを読む：

http://www.tripleodeon.com/2011/12/first-understand-your-screen/

Answer 3

私は同じアイデアと質問と同様の状況を持っていたのでここに来ました - ウェブサイトはすでにJavaScriptを必要としており、少なくとも今のところは万能のモバイルWebアプリをやっています。私たちのリリースサイクルは本当に長いです - コードがテストされてリリースされるまでに、ハードコードIハードコードの検出はやや廃止されます。この代替インターフェイスの目的は、小さな画面で動作させることであるため、そのテストを使用することは理にかなっているように思われます。ただし、どのサイズを選択するかわかりません。特定の画面寸法にモバイルデバイスがバインドされていません（慣習によって）バインドされていません。メインWebページが機能しなくなった時点で決定する必要があると思います。

画面サイズだけでなく、モバイルデバイス上の標準サイトに他の問題がある場合があるため、このアプローチに対する他の人のためらいを理解できます。しかし、この種の検出には利点があると思います。あなたの唯一の問題が画面サイズである場合、私はそれが行くのに良い方法だと思います。

Answer 4

おそらく、モバイルデバイスでJavaScriptを有効にしているWebブラウザーを実際に実行している人のために、この機能をあなたのウェブサイトに追加することは痛いことではないでしょう。そうでない人については、最初の負荷で画面サイズを選択させるような単純なもの以外に、あなたが彼らについてできることはほとんどありませんか？たぶん、可能性のあるサイズの単純なドロップダウンリストですか？

Answer 5

それはあなたが達成したいことに依存します。

もし、あんたが デバイスの種類に関係なく、さまざまな画面解像度の設計 その後、解像度範囲を使用しても問題ありません。

もし、あんたが 特定のデバイスタイプ（電話、タブレットなど）の設計と解像度範囲が常に単一のデバイスタイプと一致すると仮定します, 、それからそれは最終的に壊れます。

あなたはaを使用しました 400px 例のしきい値、Galaxy S8+レポート 412x846 このコードで：

console.log("width: " + screen.width + ", height: " + screen.height);

デバイスの解像度は毎年変化し、互いに重複し始めています。大型携帯電話は小さなタブレットよりも高い解像度を持っており、大きなタブレットは一部のデスクトップよりも高い解像度を持っています。

あなたがそれをほとんど動作させたい場合、または特定の電話を検出したい場合は、それで逃げることができます。

ただし、使用することは信頼できません 画面解像度のみ デバイスタイプを検出します。