web-dev-qa-db-ja.com

Webサイトの標準の幅はピクセル単位ですか?

ウェブサイトの標準の幅はピクセル単位ですか?統計はどこですか?

23
JPJedi

ほとんどの開発者が標準として1024x768を想定しているにもかかわらず、標準はありません。

960gridという名前のCSSグリッドシステムがあります。これは、本体幅を960pxと想定し、10列で96列、または12pxで80列に分割します。

問題は、PCの画面が常に大きくなり、一部の地域では徐々に大きくなっていることです。

一方、技術トップでは、モバイルデバイスやネットブックの画面が小さくなります。

この現実に対処するのは苦痛です。 CSS Media Queriesが助けになります。または、タグリンク(relハンドヘルドを使用)を使用して、モバイルデバイスに代替バージョンを提供できます。

いくつかの参照リンクに従ってください

23
Dave

Webサイトの標準的な幅はピクセル単位ですか?

0より大きく、無限大より小さい任意の数。

レスポンシブWebデザイン(RWD)の現在のベストプラクティスは、ピクセル単位の幅に関係なくすべてのデバイスをサポートすることです。通常、これには、メディアクエリを使用して、さまざまな範囲の画面サイズにさまざまなスタイルを提供することが含まれます。実際に使用される範囲は、サイズ間で一貫性のある設計よりも重要であり、サイトはサイズ間で機能を維持します。

ユーザーはあまり考えずにさまざまな画面サイズを表示する可能性が非常に高いため、ウィンドウをドラッグして画面の半分にドッキングしたり、電話を傾けたりするときの驚きの量を最小限に抑える必要があります。

使用される一般的な幅の範囲は次のとおりです。

  • 非常に小さい:0-480
  • small:480- 768
  • メディア:768-1024
  • large:1024-1200
  • 特大:1200+

これらの範囲は非常に一般的であるため、実際には標準であると言えます。すべての範囲を使用する必要があるわけではありません。たとえば、サイトが768未満の場合は流動的な幅であり、固定幅で768以上の場合は中央に配置される場合があります。

とはいえ、ユーザーがサイトを表示するために選択したデバイスでサイトが機能している限り、使用する数値は特に重要ではないことに注意してください。

統計はどこにありますか?

トリッキーな部分、実際のデータに移ります。サイトを再設計する場合、重要なデータは自分のものだけです。ウィキペディアまたはスタックオーバーフロー、またはGoogle、またはその他の大規模なウェブサイト-可能性のあるリスト-アナリティクスデータは、yourのデータとは無関係ですyourサイト。

主に特定のデバイス幅の範囲を使用しているほとんどのユーザーを統計で表示する場合は、おそらくそれらのユーザーに最初にサービスを提供することに集中する必要があります。デザインが適切にレスポンシブであれば、特定のサイズに焦点を合わせる必要はまったくありません。

新しいウェブサイトや以前は分析を行っていなかったサイトについては、モバイルファーストアプローチの使用を検討し、ユーザーベースに適切に適応できるように分析を使用するようにしてください。


後世の酒のための古い、古いRWD前バージョン

google by browser size に言及する人が誰もいなかったことに驚いています。

標準に関して:

視聴者の80%は最大1000ピクセルの幅を処理できますが、canが1000ピクセル以上の幅を処理できるものは多くの場合、処理しません。ワイドスクリーンモニターでは、多くの人がウィンドウを画面の半分に合わせます。 Win7がdrag-n-dockをサポートするようになったので、Win7はさらに人気が高まるでしょう。

高さに関しては、ユーザーへの第一印象は、ページの上部から最大約600ピクセルまでです。ただし、ほとんどのユーザーは、コンテンツが「スクロールせずに見える」ことを知っており、期待しており、喜んでスクロールすることができます。

1000pxよりも広くしたい場合は、ネットブックや小さな画面のユーザーがコンテンツを適切に表示できるように、流動的なレイアウトを強くお勧めします。

〜960pxは標準化された幅になる傾向がありますが、実際にはコンテンツとスタイルに依存します。

18
zzzzBov

昨年Googleアナリティクスを使用して、 (内部ブラウ​​ザーの平均幅と高さ (ユーザーが実際に見るもの)を調べるために少しテストを行いました。

3
martin

他の人が言ったように、このタイプのものには標準がありません。ただし、ここにあなたのウェブサイトを作るかブレーキをかけるいくつかのヒントがあります:

私は常にパーセンテージまたは最悪のシナリオビルドのいずれかを使用しました。一般的に遭遇する最小の画面解像度は800x600であり、それもまれです。それ以下のものはおそらくモバイルデバイス上にあります。 775px幅は使用するのに適した媒体です。実際、ウェブサイトがより大きな画面に拡大された場合でもWebサイトが魅力的であることがわかっている場合は、80%にすぎません。最も一般的な問題は、テキストコンテンツ(1600ピクセル幅にスケールアウトした場合)が空で短く見えることです。ウェブサイトの幅を775pxにすると問題は解決しますが、どちらかの側に大規模なオープンスペースがあると見栄えがよくない場合があります。

ユーザーを左右にスクロールさせないでください。側面のコンテンツを切り離すことは、潜在的な顧客や読者を失う最も早い方法です。

ナビゲーションを上部付近またはユーザーがスクロールする必要のない場所に配置します。

そして、単なるコンテンツのヒント。高いグラフィックス/低い情報または高い情報/低いグラフィックスのいずれかがあります。両方を組み合わせようとすると、常にひどく見えます。

2
Christopher

人気のある画面解像度がどれくらいであるかを知ってから、大多数の一般的な使用に基づいてテンプレートを作成します。個人的には、レスポンシブデザインを使用することをお勧めします。

2013年1月以降

  1. 1366x768 25.4%

  2. 1920x1080 11.0%

  3. 1280x1024 9.7%

  4. 1440x900 7.3%

  5. 1280x800 8.2%

  6. 1680x1050 5.7%

  7. 1600x900 5.0%

  8. 1920x1200 2.9%

  9. 1360x768 2.1%

  10. 2560x1440 1.1%

  11. その他11.6%

1
Simon Hayter

Google Analyticsは、訪問者の画面解像度を記録します。カスタムレポートを簡単に作成して、your訪問者の一般的な画面サイズを確認できます。 2013年5月の私のウェブサイトの統計(トップ15)は次のとおりです。

Rank     Resolution    % of Visits
----     ----------    -----------
   1     1366x768            23.0%
   2     1920x1080           17.7%
   3     1440x900             8.4%
   4     1280x1024            8.4%
   5     1680x1050            7.1%
   6     1280x800             6.9%
   7     1600x900             6.0%
   8     1920x1200            4.7%
   9     1024x768             4.4%
  10     2560x1440            2.3%
  11     1360x768             2.1%
  12     1280x768             1.0%
  13     1600x1200            0.7%
  14     1280x720             0.7%
  15     1152x864             0.5%

統計情報は、受信するトラフィックのタイプに応じてサイトごとに異なるため、それに応じて設計してください。私自身は、幅が1000px min-widthで、合理的なmax-widthの流動的なデザインを好みます。

1
Salman A

標準は「可能な限り幅/高さ」です。ユーザー画面に依存します:

http://www.w3schools.com/browsers/browsers_display.asp

1
PeterMmm

ウェブサイトのコンテンツに依存していると思います。

たとえば、サイドバーなどを必要とせず、ミニマルなデザインが好きな場合は、ウェブページの幅を500pxに設定できます。

だから、私はWebレイアウトのサイズについての標準を信じていない(そして好きではない)。

0
Eray

960ピクセルは最も安全です。1024x768の画面で動作し、スクロールバー用のスペースを残し、iPhoneでも横長モードで動作します(ピクセルは480x320の画面を効果的な960x640に2倍にし、スクロール・バー)。

0
Mike Scott

現在のほとんどのワイドスクリーンモニターの解像度が「1440x900」以上であることを考えると、特に画像の表示に関しては、1280ピクセル幅が「標準」になりつつあると思います。

注:1280ピクセル幅は、多くの古い4:3比率の17インチおよび19インチスクリーンの幅でした。

0
J. Chin

そんなに標準的なものは実際には存在せず、統計はターゲットの人口統計に完全に依存しています。一般に、技術者を対象にすると、ハードウェアが改善され、解像度が高くなりますが、逆に技術的ではなくなります。ただし、ほとんどの場合、標準よりも解像度が大幅に低い電話、ネットブックなどがあります。

参考のために、現在は通常1024x768以上を想定しています。

いずれにせよ、ここにいくつかあります: http://www.w3schools.com/browsers/browsers_display.asphttp://www.w3counter.com/globalstats.php

0
Hawxby