Webサイトの推奨解像度（幅と高さ）？[閉まっている]

一般的なWebサイトの解決に関する基準はありますか？

幅が1280px以上の新しいモニターを対象としていますが、高さが異なる場合があり、ブラウザごとにツールバーの高さが異なる場合もあります。

これには何らかの基準がありますか？

最近のアドバイスは：

1024x768に最適化します。ほとんどのサイトでは、これはほとんどの訪問者をカバーします。ほとんどのログは、訪問の92〜99％が1024を超えることを示しています。1280はますます一般的になっていますが、1024とそれ以下のいくつかはまだたくさんあります。このために最適化しますが、他は無視しないでください。

1024 =〜960。スクロールバー、ウィンドウエッジなどを考慮すると、1024x768画面の実際の幅は約960ピクセルになります。一部のツールは、わずかに小さいサイズ（約940）に基づいています。これは、Twitterブートストラップのデフォルトのコンテナ幅です。

ワンサイズでデザインしないでください。ウィンドウのサイズは異なります。画面のサイズがウィンドウのサイズと等しいと仮定しないでください。合理的な最小値で設計しますが、調整されると想定します。

レスポンシブデザインと流動的なレイアウトを使用します。ウィンドウのサイズが変更されたときに調整されるレイアウトを使用します。人々は特に大きなモニターでこれをたくさんします。これはCSSの優れたプラクティスです。これをサポートするフロントエンドフレームワークがいくつかあります。

モバイルを一流の市民として扱います。常にモバイルデバイスからのトラフィックが増えています。これらはさらに多くの画面サイズを導入します。それでも960向けに最適化できますが、レスポンシブWebデザインテクニックを使用すると、ページが画面サイズに基づいて調整されます。

ログブラウザの表示情報。これに関する実際の数値を取得できます。こことこことここにいくつかの数字が見つかりました。サイトをリギングして同じデータを収集することもできます。

ユーザーはスクロールするので、高さを気にする必要はありません。従来の議論では、ユーザーはスクロールせず、重要なことは「スクロールせずに見える範囲」でなければなりません。これは何年も前に覆されました。ユーザーはたくさんスクロールします。

画面解像度の詳細：

• 画面解像度とページレイアウト
• ウェブサイトを設計するのに最適な画面解像度
• ブラウザサイズの設計-画面サイズではありません

レスポンシブデザインの詳細：

• レスポンシブWebデザイン（2010年5月25日）、Ethan Marcotte、A List Apart。
• ウィキペディアのレスポンシブWebデザイン
• マルチデバイスレイアウトパターン（2012年3月14日）Luke Wroblewski。適応可能なマルチデバイス画面レイアウトの最も一般的なパターンをカタログ化します。

レスポンシブデザインとリキッドレイアウトのためのツールとフロントエンドフレームワーク：

• Twitterブートストラップ
• ザーブ財団
• レスポンシブWebデザインのための50の素晴らしいツール（2012年4月24日）Denise JacobsとPeter Gasston

悪い考えだと思います。コンテンツをレイアウトから分離する全体のポイントは、Webページをあらゆる種類のブラウザーで表示できるようにすることでした。

最小画面サイズなどの人為的な制限を加えると、市場が制限されます。

そうは言っても、すべてのデスクトップが1024x768を表示できるはずです。しかし、iPhoneやその他の画面の問題のあるデバイスで実行されているブラウザー、またはデスクトップ全体をブラウザーに使用しないブラウザーについてはどうでしょうか。

特定の質問への回答として、いいえ、ブラウザの最小または共通の表示領域に標準があるとは思いません。

ユーザーに水平スクロールを強制することは、重大なUI違反です。画面サイズがわかっているユーザー向けのWebサイトを具体的に構築している場合を除き、デザインが800ピクセルの幅の小さな画面で動作することを確認するのが最も安全です（メモリが適切に機能する場合は、Webサーフィンの人口の約8％）。800x600でサーフィンをしている人々を犠牲にせずに、より大きな画面にうまく適応させるのが賢明です。

これも考慮すべきもう1つのことです。誰もがブラウザをフルスクリーンで実行するわけではありません（私はしません）。したがって、ifが特定の（そして大きな）「画面サイズ」で設計しても問題ないという考えは、いくつかの理由で実際には機能しません。

2010年12月15日の更新：この質問に初めて答えたとき、800ピクセルが適切な答えでした。ただし、この時点では、幅1024ピクセル（または他の誰かが指摘するように960ピクセル）をお勧めします。テクノロジーの進歩...

2008年のブラウザ表示の統計は次のとおりです。http： //www.w3schools.com/browsers/browsers_display.asp

ユーザーの約50％は、まだ1024x768を使用しています。高解像度でサイトを美しく見せたい場合は、柔軟なレイアウトを使用してください。

幅には実際には業界標準があります（少なくともyahooによると）。サポートされている幅は750、950、974、100％です。

事前定義されたグリッド（列レイアウト）にはこれらの幅の利点があり、広告を含める場合、広告の標準の寸法とうまく機能します。

注目に値する興味深い話。

YUI Baseを参照

ここに素晴らしいツールがあります：Google Labsブラウザーのサイズ

ユーザーが800x600解像度のモニターを持っていることだけを期待するべきだと私は言うでしょう。カナダ政府には、これを要件の1つとしてリストする基準があります。派手なワイドスクリーンモニターを持っている人にはそれは低く見えるかもしれませんが、誰もが素晴らしいモニターを持っているわけではないことを覚えておいてください。私はまだ1024x768で実行している多くの人々を知っています。また、800x600で走っている人、特に旅行中に安いウェブカフェに出くわすことも珍しくありません。また、必要がない場合は、ブラウザウィンドウを全画面表示にする必要があります。幅の広いモニターでサイトの幅を広げることはできますが、ユーザーを水平方向にスクロールさせないでください。ずっと。低解像度をサポートするもう1つの利点は、サイトが携帯電話で動作し、ニンテンドーWiiがはるかに簡単になることです。

あなたの少なくとも1280幅についてのメモ、私はそれがあまりにも多すぎると言わざるを得ないでしょう。ほとんどの17インチ、さらには19インチの非ワイドスクリーンモニターは、最大解像度1280x1024のみをサポートしています。そして、私が今入力している14インチのワイドスクリーンラップトップは、幅がわずか1280ピクセルです。私が努力すべき最大の最小解像度は1024x768ですが、800x600が理想的でしょう。

これまでのすべての回答はデスクトップモニターに関するものですが、私はiPhoneでスタックオーバーフローを使用しており、水平方向の1024または1280ピクセルをターゲットにしてモバイルプラットフォームを除外すべきではないと思います。ページリーダーをマークアップして、ブラウザがすべての意味を理解し、スクリーンリーダーやその他の思いがけないキットであっても、無料で使えるようにします。

特定の解像度をターゲットにするのではなく、多くの異なる解像度に簡単に適応することが最善です。

私たちが使用するガイドラインは、かなり広く使用されているようで、Googleアナリティクスから得られた数値に裏付けられており、幅1024ピクセル、高さ768ピクセル（1024x768）の画面で機能するようにサイトを設計することです。そして、1280x800は私たちが見る最も一般的な解像度であり、すべてのトラフィックの少なくとも70％を占めています）。

これが、幅約1000ピクセルの中央列を使用し、最も重要なコンテンツを上位500〜600ピクセルで使用する多くのサイト（これを含む）を表示する理由です。このサイズの画面で表示すると、スクロールせずに見える範囲にあります。

1000ピクセル幅のレイアウトを使用すると、最大約1680ピクセルの幅の画面サイズ（通常、ラップトップで見られるのと同じくらいの高さですが、大きな17インチのものを除く）でも十分に機能しますが、1920ピクセルでは少しばかげて見えます。幅の広いもの（ハイエンドコンピューター、通常はワークステーション）ですが、これらの非常に高い解像度では、一般的なインターネット上のトラフィックの大部分を占めることはありません-2％以下（一方、このサイトのような専門のユーザーがいる場合） 、高解像度の図は多少高くなる場合があります）。

最適な幅は1024になる場合がありますが、さまざまなブラウザー設定（ナビゲーションツールバー、ブックマークツールバー、ステータスツールバーなど）を考慮して高さを調整し、タスクバー設定を考慮に入れる必要があります。それはすぐに768を約550に落とします。

ターゲットブラウザのサイズが何であれ、上記のようにブラウザのツールバー、ステータスバー、およびスクロールバー用のスペースを含めるようにしてください。Internet Explorer（IME）のツールバーとステータスバーには、多くの場合100pxを超える垂直方向のスペースがあります。通常、1024 x 768で撮影する場合、安全のために、幅960〜980ピクセル、高さ600ピクセル程度のデザインを作成しようとします。このようにして、必要に応じてスクロールと適切な空白（デザインで必要な場合）に対応します。特定のサイズをターゲットにする必要がある場合は、YUIグリッドを強くお勧めします。

YUIグリッド

幅だけでなく、「すべてをフォールドの上に保つ」ために使用する高さについて、デザイナーから多くの質問を受けます。ここに私が最近与えた一つの答えがあります-

幅については、私はデザイナーではありませんが、960pxの幅は、見栄えがよく、ほとんどのディスプレイにうまく収まる列に分割するのに向いているため、最近行く方法だと読みました。可能であれば、リキッドレイアウトを設計します。ただし、デザイナー、CSSスキル、画像、テキストの量によっては、これが常に実用的であるとは限りません。

（常に、1行あたり65〜80文字、行の高さは約1.15にする必要があります）。これはテキストに最適な列幅であり、非常に幅の広い列や幅の狭い列よりも読みやすく、快適であることが証明されています）

「スクロールせずに見える範囲」については、そのような概念をWebで使用しないように注意する必要があります。水平スクロールは回避できますし、回避すべきですが、垂直スクロールは100％回避できないものです。私が言えることは、1024x768のディスプレイ（少なくとも95％のユーザーがそれ以上を持っている）では、高さ600pxの固定ブロックで問題ないということです。しかし、そこには多くの異なる表示形式があり、ブラウザのクロムは多くの領域を占める可能性があり、誰もがブラウザウィンドウを最大化するわけではありません。

ほぼ同じことを言っているサイトが他にもありますが、実際の統計によると、400ピクセル程度しかない可能性があるため、「スクロールせずに見える範囲」のすべてをすべてのユーザーに提供する計画は困難です。

そして最後に、非常に詳細に説明する良い長い記事（私はもっと投稿しますが、だから私はあまりにも初心者だと言います）- ブラウザサイズの設計方法-baekdal.com

私は個人的に常に最大幅1000pxに固執しており、ページの中央に配置されています（マージンは左/右：自動）。

1024x768未満で実行している場合は、アップグレードする必要があります。真剣に。ほぼ2010年です。ネイティブ解像度1280x1024のバーゲンビン液晶モニターを購入できます。

メディアクエリをご覧になることをお勧めします。これは、CSSに新しく追加された便利な機能であり、非常に意味があり、なぜこれが以前に実装されなかったのか不思議に思うでしょう。基本的に、CSSを介してブラウザの属性（maxやmin-widthsなど）を直接ターゲットにし、そこからレイアウトコードを分岐させることができます。印刷スタイルシートの作成と同様に、デスクトップとモバイルのレイアウトを同じファイルで並行して作成できます。

ただし、柔軟なレイアウトや流動的なレイアウトでは、ボディの背景画像と一致する必要のある背景画像を使用する場合など、デザインが少し落ち着きます。

私はむしろ、サイトに異なるcssレイアウトを作成し、ユーザーの解像度に応じてそれらを適用させるか、それが不可能な場合（まだ掘り下げていない場合）、選択可能なオプションにします。

わかりました、私はここに多くの誤った情報を見ます。手始めに、特定の解像度、たとえば800x600を使用してWebページを作成すると、そのページはその解像度のみを使用して適切にレンダリングされます。同じページが他の人のラップトップまたは自宅のPCモニターに表示される場合、ページは、ページのデザイン時に使用した解像度ではなく、その画面の現在の解像度を使用して表示されます。特定の解像度のWebページを作成しないでください。アスペクト比と画面解像度が多すぎて、「1つのサイズですべてに対応する」シナリオを期待できないため、Webデザインには存在しません。解決策は次のとおりです。CSS3メディアクエリを使用して、解決に対応できるコードを作成します。次に例を示します。

@media screen and (max-width: 800px) {
styles
}
@media screen and (max-width: 1024px) {
styles
}
@media screen and (max-width: 1280px) {
styles
}

ご覧のとおり、異なる解像度でレンダリングする3セットのスタイルを指定しました。この例の場合、画面の解像度が800pxより大きい場合、代わりに1024のCSSが実行されます。同様に、コンテンツを表示する画面が1224pxの場合、1224は1024より大きいため、1280が実行されます。現在作業中のサイトは、すべての解像度800x600から1920x1080で機能します。留意すべきもう1つの点は、同じ解像度のすべてのモニターが同じサイズの画面を備えているとは限らないことです。15.4ラップトップを並べて配置することもできますが、どちらも同じように見えますが、異なるLCD画面ではすべてのピクセルが同じサイズであるとは限らないため、両方の解像度が大幅に異なる可能性があります。したがって、メディアクエリを使用して、高解像度、特に1280+のラップトップ画面でWebサイトの作成を開始します。また、ラップトップで異なる解像度を使用して各メディアクエリを作成します。Windowsの解像度設定を使用して800x600を調整し、その解像度でメディアクエリを作成してから、1024x768に切り替えて、その解像度で別のメディアクエリを作成できます。私は何度も続けることができますが、皆さんは要点を理解すべきだと思います。

更新：メディアクエリを使用するモバイルデバイス向けの革新的なWebデザインの説明に役立つメディアクエリの使用へのリンクを次に示します。

そのチュートリアルでは、すべてのデバイス用に設計する方法を示します。具体的には、メディアクエリのチュートリアルもあります。私はすべてのデバイス、すべての画面、すべての解像度でサブドメインを使用せず、CSSのみを使用してレンダリングするサイト全体を開発しました！私はまだタブレットとスマートフォンのサポートに取り組んでいます。このサイトはどのラップトップでも、50インチLCD TVでも完全にレンダリングされ、多くのページがすべてのモバイルデバイスで完全に機能します。すべてのコードをページに配置すると、ページの読み込みが速くなります！また、CSSの「background-size：cover」に関する記事の説明にも注意してください。または「含む」プロパティ、それらはあなたの背景グラフィックスを流動的にし、すべての解像度で完璧にレンダリングすることができます。

サイトのチュートリアルに従ってください。そうすれば、何でも何でもレンダリングする単一のWebページを作成できます。

最小幅として1024をターゲットにしてください。800でどのように見えるか試してみてください。ただし、あまり気にしないでください。800x600では、主要なWebサイトのほとんどが機能しないため、その解像度で作業している人はとにかく問題を抱えています。

リキッドレイアウトを使用する場合は、行が長すぎると読みにくくなるため、テキストが広くなりすぎないようにしてください。これが、ほとんどのWebサイトの幅が固定されている主な理由です。

私は1024ピクセルのモニターをターゲットにしています（ただし、そのスペースの100％は使用していません）。800x600のものはあきらめました。必要に応じてスクロールすることで、古いハードウェアで少数を罰するのではなく、スペースを無駄にして新しい機器で全員を罰するのではなく、

それはあなたの聴衆、そしてあなたのアプリの性質に依存すると思います。

結局のところ、これはマークアップの標準やベストプラクティスの問題ではなく、オーディエンスを理解し、Webサイトが望んでいることを確実に行うようにすることです。

画面の解像度ではなく、ブラウザのビューポートの幅を考慮することが重要です。ディスプレイのすべてのピクセルがブラウザに割り当てられるとは限りません（その場合でも、ブラウザのクロムを差し引く必要があります）。ブラウザの幅（画面の解像度ではなくnbのブラウザの幅）をレポートする分析にアクセスできる場合は、細心の注意を払ってください。

可能な限り広い範囲のビューポートに対応するのは良いことですが、いくつかの制限があります。CSSメディアタイプで処理できる課題もあれば、できない課題もあります。一部は流動レイアウトで処理できます。ただし、流動レイアウトは、表示される情報のタイプ、行の長さ、読みやすさなどによって、すべての状況で機能するわけではありません。一部の流動レイアウトは、ワイドディスプレイでは機能しません。特定の幅などのサイズにすると、ほとんどが壊れます。

私が個人的にビューポート〜960ピクセル以上のために設計したいのと同じくらい、あなたはいつもそれをすることができません。したがって、場合によっては、ビューポート<= 760ピクセル（800ピクセル幅のディスプレイ、最大化）向けに設計するのが最も安全です。非常に速く接近しています。

変換が問題であり、レイアウトの幅が固定されている場合、キャッシュレジスターが760番目の東のどこかで "ka-ching"になるためにユーザーがクリックする必要のあるものを配置するのに十分な理由がある方がよいピクセル。

主要ナビゲーションの同上。

最後に、手に入れることができるすべてのものでレイアウトをテストします。大きい。小さい。デスクトップ。ハンドヘルド。ワークス。代わりはありません。

私がアクセスできるすべてのクライアントサイトから画面解像度のサンプルを取得しました。これには、8業界以上の20以上のサイトが含まれます。結果は次のとおりです。
代替テキストhttp://unkwndesign.com/so/percentScreenResolutions.png
これに基づいて、私は1024x768で見栄えがよくなることを確認します。これは、ここではロングショットで大多数であるためです。また、高さについてはあまり気にしないでください。ただし、ほとんどのページをデフォルトのフォントサイズで1〜2印刷ページより多くしないようにしてください。ほとんどの人は、その長いページを読みません。ユーザーがツールバーをインストールすると、縦のスペース、私の個人的な好みはそれが彼らの問題であるということですが、私はそれが大したことになるとは思いません。

*端数処理のため、割合は合計で100.05％になることに注意してください。

解像度が高いほど、インターネットブラウザーが最大化される可能性が低くなることに注意してください。

また、一部のブラウザには横方向のバーもあります。

何をレンダリングするかによって異なりますが、800〜900の幅で壊れない可変幅レイアウトを使用します。

高さは実際には問題ありません。

sbeamは、「常に1行あたり65〜80文字にする必要がある」と述べています。それは真実ではありません。たとえば、Wikipediaの場合、1行あたり180文字になることがあります。それとも特定のウェブサイトを意図したものでしたか？