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


23

ウェブサイトの標準的な幅はピクセル単位ですか、統計情報はどこにありますか?


2
今日に至って、レスポンシブWebデザインが標準になりつつあります。Webサイトは、さまざまな画面サイズに適応する必要があります。少なくとも:HDスクリーン、デスクトップ、ラップトップ、タブレット、およびモバイル。
マリオ・アワド

回答:


23

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

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

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

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

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

いくつかの参照リンクをたどってください


17

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

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

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

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

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

  • 極小:0-480
  • :480- 768
  • :768-1024
  • :1024-1200
  • 特大:1200+

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

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

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

トリッキーな部分、実際のデータに移ります。サイトを再設計する場合、重要なデータは自分のものだけです。何ウィキペディアやスタックオーバーフロー、またはグーグル、または任意の他の--大ウェブサイト-その-かもしれない-リストの分析データは、とは無関係であると言い、あなたのためのデータをあなたのサイト。

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

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


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

googleでブラウザのサイズに言及する人が誰もいなかったことに驚いています。

標準に関して:

視聴者の80%は1000ピクセルまでの幅処理できますが、1000ピクセルを超える幅を処理できるユーザーは多くの場合、処理しません。ワイドスクリーンモニターでは、多くの人がウィンドウを画面の半分に合わせます。Win7がdrag-n-dockをサポートするようになったので、Win7がさらに普及する可能性があります。

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

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

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


1
誰かが興味を持っている場合、Google Chromeを1920x1200解像度モニターの片側にドッキングすると、927pxの使用可能な領域が生じました(スクロールバー用のスペースを残します)。
マティス

リンクはもう機能しません。
AlphaMale


2

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

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

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

ナビゲーションを上部付近またはユーザーがスクロールする必要のない場所に見つけてください。

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



1

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

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

Google Analyticsは、訪問者の画面解像度を記録します。カスタムレポートを簡単に作成して訪問者の一般的な画面サイズを確認できます。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ます。


0

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

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

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


0

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

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

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


0

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


0

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

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


販売されていない「使用済み」画面のほとんどは、Macとラップトップのために1366x768pxです。私の答えをご覧ください。
サイモンヘイター

まだ回答に「コメントを追加」できないため、ここで質問します。画面解像度のリストのソースは何ですか?気になります。1366x768の情報をご提供いただきありがとうございます。知っておくと便利です。
J.チン

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.