web-dev-qa-db-ja.com

モバイルおよびデスクトップの画面サイズの統計

モバイルとデスクトップの画面サイズに関する統計情報はどこで入手できますか?

レスポンシブサイトを作成していること、具体的には、天気を調べることは、大半の携帯電話とデスクトップユーザーやタブレットユーザーの間でブレークポイントを置くことができるサイズのギャップです。あるべきだと思うが、自分の仮定をテストする必要があることを知っている。

そのため、明確にするために、携帯電話には1セットのスタイルを、タブレットとデスクトップには別のセットを用意したいと考えています。

ありがとう

24
Evanss

レスポンシブビジネスWebサイト( https://plus.google.com/101258044853419629282/posts/GejAf734nP6 )の実行を終えたところです。ここで説明できることは、ブレークポイントは間違いなく600pxではありません!

事実は次のとおりです(CSSおよび@mediaクエリの観点から):

  1. 1366pxのデスクトップ幅は、最も一般的なサイズである1024pxを超えました: http://techcrunch.com/2012/04/11/move-over-1024x768-the-most-popular-screen-resolution-on-the- web-is-now-1366x768 /

  2. それでも、タブレットでは、1024x768pxのiPadが最も人気があります。

  3. iOS Safariは健全であり、常に適切なビューポートを報告します。通常のiPadまたはRetina iPadを使用している場合でも、1024x768であると表示されます。同様に、iPhoneは320x480であると表示します。

  4. このプラットフォームでは画面が異なるため、Androidブラウザーにはさらに問題があります。たとえば、Nexus Oneの画面は480x800pxですが、254ppi(ピクセル比1.5)では、CSSに報告されるビューポートは実際には360x600です。おもしろいGalaxy Nexusでも316ppi(Retinaのようなピクセル比2.0)で1280x720pxの画面を持っていると報告されているビューポートは360 * 640です。

例外はChrome Beta on Android 4.0で、ランドスケープモードではバグがあり、そのGalaxy Nexusでビューポートの幅が1280pxとして報告されているようです。デスクトップCSSと競合しないことは非常に困難です。

結論

私は個人的に768pxの画面幅のブレークポイントを使用しました。つまり、横向きのiPadをデスクトップとして扱い、デスクトップの最小サイズは1024pxであると想定しています。しかし、昔のように、800pxと仮定することもできます。次に、私はiPadのポートレート専用に768pxを扱います。非網膜iPadには多くのスペースがあるため、まだ小さな画面ではありません。それから、768px未満のものはすべて、小さな画面のスマートフォンと呼んでいます。

最適化を最大限に行うには、640px、600px、480px、360px、320px、さらに240px(ローローエンドAndroid)で中間ブレークポイントを使用できますが、自動的に収まるように768px未満で完全に%ベースにすることをお勧めします。

[〜#〜] update [〜#〜]:私が見つけた便利なブレークポイントの1つは810px-Facebookタブのiframeの幅です。 FBアプリを作成し、webappコードを再利用する場合に役立ちます。

41
f055

latest解像度の統計では、このURLの日付範囲を変更します。 http://gs.statcounter.com/#resolution-na-monthly-200903-201401

私が作成したプロジェクトでは、メディアクエリのブレークポイントは1024px幅にあります。これはiPad 1、2、およびMiniの幅であり、その下のすべてが「モバイル」で、上のすべてがiPad + Desktopです。

これが@nytimes開発者のやり方です。参照:JavaScript Jabber Podcast 093: http://javascriptjabber.com/093-jsj-the-new-york-times-and-javascript-with-eitan-konigsburg-alastair-coote-and-reed-emmons / 10:40にこれを説明する場所。

デバイス解像度のより包括的なリスト: http://mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units/

いつものようにそれは依存するwhoあなたはターゲットにしています。 kids(多くの人がローエンドAndroid)ブレークポイントが320px(幅)の「超モバイル」バージョンが必要になる場合があります。

2
nelsonic

960 x 800 x 768 x 640 x 480 x 360は、レスポンシブWebデザインのために従うべきサイズです

0

statcounter.com を見て、数値を W3C などのソースと比較すると、数値の取得方法について懐疑的になります。

実際の統計情報を取得したい場合は、このサイトにアクセスしてください: ブラウザ表示高画面解像度

0
Juraj