モバイルとデスクトップの画面サイズに関する統計はどこで確認できますか?
私はレスポンシブ サイトを作成していますが、具体的に調べようとしているのは、ブレークポイントを設定できる大部分の電話とデスクトップおよびタブレット ユーザーの間のサイズのギャップです。あるべきだと思いますが、自分の仮定をテストする必要があることを知っています。
明確にするために、私は電話に 1 つのスタイル セットを持たせ、タブレットとデスクトップに別のスタイル セットを持たせたいと考えています。
ありがとう
質問する
45193 次
4 に答える
41
レスポンシブ ビジネス Web サイト ( https://plus.google.com/101258044853419629282/posts/GejAf734nP6 ) を作成し終えたところです。
事実は次のとおりです (CSS および @media クエリに関して):
1366 ピクセルのデスクトップ幅は、最も人気のあるサイズとして 1024 ピクセルを上回りました: http://techcrunch.com/2012/04/11/move-over-1024x768-the-most-popular-screen-resolution-on-the-web-is-現在-1366x768/
それでも、タブレットでは、1024x768px の iPad が最も人気があります。
iOS Safari は正常で、常に適切なビューポートを報告します。通常の iPad または Retina iPad のどちらを使用していても、1024x768 であることがわかります。同様に、iPhone は 320x480 であることがわかります。
このプラットフォームでは画面が異なるため、Android ブラウザーにはさらに問題があります。たとえば、Nexus One の画面は 480x800 ピクセルですが、254ppi (ピクセル比 1.5) で CSS に報告されるビューポートは実際には 360x600 です。さらに面白い Galaxy Nexus は 1280x720px の画面で 316ppi (Retina のようなピクセル比 2.0) で、報告されたビューポートは 360*640 です。
例外は Android 4.0 の Chrome Beta です。ランドスケープ モードではバグがあり、Galaxy Nexus ではビューポート幅が 1280px と報告されているようで、デスクトップ CSS と競合しないようにすることが非常に困難です。
結論
私は個人的に 768 ピクセルの画面幅のブレークポイントを使用しました。つまり、横向きの iPad をデスクトップとして扱い、デスクトップの最小サイズを 1024 ピクセルと想定しています。しかし、昔のように 800px であると想定することもできます。次に、iPad のポートレート専用に 768px を扱います。Retina 以外の iPad には多くのスペースがあり、まだ画面が小さいわけではないからです。そして、768px以下のものはすべて小画面スマホと呼んでいます。
最大の最適化のために、640px、600px、480px、360px、320px、さらには 240px (ローローエンド android) で暫定的なブレークポイントを使用できますが、自動的に収まるように 768px 未満で完全に % ベースにすることをお勧めします。
更新: 私が見つけた便利なブレークポイントの 1 つは 810px です。これは、Facebook タブの iframe の幅です。FB アプリを作成し、webapp コードを再利用したい場合に役立ちます。
于 2012-04-17T20:02:42.253 に答える
2
最新の解像度統計 については、この 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/
いつものように、誰をターゲットにするかによって異なります。 子供向けのサイト/アプリを構築している場合(その多くはローエンドの androidを使用しています)、320px (幅) にブレークポイントがある「超モバイル」バージョンが必要になる場合があります。
于 2014-02-20T10:47:01.920 に答える
0
statcounter.comを見て、数値をW3Cなどの情報源と比較すると、彼らがどのように数値を取得したかについて懐疑的になる可能性があります。
実際の統計を取得したい場合は、このサイトにアクセスしてください: browser display , high screen resolution
于 2014-09-13T22:23:59.107 に答える