browser - 推奨される Web サイトの解像度 (幅と高さ)?

Question

一般的な Web サイトの解像度に関する標準はありますか?

おそらく少なくとも幅 1280 ピクセルの新しいモニターをターゲットにしていますが、高さは異なる場合があり、ブラウザーごとにツールバーの高さも異なる場合があります。

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

score 225 · Accepted Answer

最近のアドバイスは次のとおりです。

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

score 29 · Accepted Answer

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

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

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

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

score 8 · Accepted Answer

ユーザーに水平方向のスクロールを強制することは、深刻な UI 違反です。既知の画面サイズを持つ人口向けの Web サイトを特に構築している場合を除き、800 ピクセル幅の小さな画面でデザインが機能することを確認するのが最も安全です (メモリが適切であれば、Web サーフィン人口の約 8%)。より大きな画面にうまく適応させるのは賢明ですが、それでも 800x600 でネットサーフィンをしている人々を犠牲にしてはいけません。

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

2010 年 12 月 15 日の更新: この質問に最初に回答したとき、800 ピクセルが適切な回答でした。ただし、この時点では、1024 ピクセル幅 (または他の誰かが指摘しているように 960 ピクセル) をお勧めします。技術は進歩する...

score 4 · Accepted Answer

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

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

score 3 · Accepted Answer

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

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

興味深いトークも一見の価値あり。

ゆいベースを見る

score 3 · Accepted Answer

3

ここに素晴らしいツールがあります: Google Labs Browser Size

于 2010-02-13T23:22:08.200 に答える

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

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

score 1 · Accepted Answer

私は個人的に常に最大幅 1000px に固執しており、ページの中央に配置されています (margin left/right: auto を使用)。

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

特定の解像度をターゲットにするのではなく、さまざまな解像度に簡単に適応できるようにすることをお勧めします。

score 1 · Accepted Answer

最適な幅は 1024 までかもしれませんが、さまざまなブラウザー設定 (ナビゲーションツールバー、ブックマークツールバー、ステータスツールバーなど) とタスクバーの設定を考慮して高さを調整する必要があります。768 をすぐに 550 前後に落とします。

score 1 · Accepted Answer

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

ゆいグリッド

score 1 · Accepted Answer

ただし、柔軟なレイアウトやリキッドレイアウトでは、デザインが少し制限されます。たとえば、ボディの背景画像と一致する必要がある背景画像を使用する場合などです。

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

score 1 · Accepted Answer

幅だけでなく、「すべてをスクロールせずに見えないようにする」ためにどの高さを使用すればよいかについて、デザイナーから多くの質問を受けます。これが私が最近与えた1つの答えです -

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

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

「アバブザフォールド」に関しては、ウェブ上でそのような概念を使用しないように注意する必要があります。水平スクロールは避けることができますし、避けるべきですが、垂直スクロールは 100% 避けることはできません。私が言えることは、1024x768 のディスプレイ (少なくとも 95% のユーザーがそれ以上のディスプレイを持っている) では、固定の 600px の高さのブロックで問題ないということだけです。しかし、世の中にはさまざまな表示形式があり、ブラウザーのクロムは多くのスペースを占める可能性があり、すべての人がブラウザーウィンドウを最大化するわけではありません。

多かれ少なかれ同じことを言っている他のサイトがいくつかありますが、実際の統計によると、400px程度しかない可能性があるため、すべての人に「スクロールせずに見える範囲」ですべてを完全に取得することを計画するのは困難です.

そして最後に、非常に詳細な長い記事があります (もっと投稿したいのですが、SO は私があまりにも初心者だと言っています) -ブラウザのサイズに合わせてデザインする方法 - baekdal.com

score 1 · Accepted Answer

わかりました、ここには多くの誤った情報があります。まず、特定の解像度 (たとえば 800x600 など) を使用して Web ページを作成すると、そのページはその解像度のみを使用して適切にレンダリングされます。同じページが他の人のラップトップまたは自宅の PC モニターに表示される場合、そのページは、ページのデザイン時に使用した解像度ではなく、その画面の現在の解像度を使用して表示されます。1 つの特定の解像度のために Web ページを作成しないでください。アスペクト比と画面解像度が多すぎて、「フリーサイズ」のシナリオを期待することはできません。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 ページを作成できます。

score 0 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

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

*四捨五入のため、パーセンテージの合計は100.05％になることに注意してください。

score 0 · Accepted Answer

sbeam は、「常に 1 行あたり 65 ～ 80 文字にする必要がある」と述べています。そうではありません。たとえばウィキペディアでは、1 行あたり 180 文字の場合があります。それとも、特定の Web サイトを意図していたのでしょうか。

score 0 · Accepted Answer

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

これが、幅約 1000 ピクセルの中央列を使用し、最も重要なコンテンツが上部 500 ～ 600 ピクセルにある多くのサイト (これを含む) を目にする理由です。

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

私はそれがあなたの聴衆とあなたのアプリの性質に依存すると思います.

score 0 · Accepted Answer

最終的には、これはマークアップの標準やベストプラクティスの問題ではなく、対象者を理解し、Web サイトが意図したとおりに機能するようにすることです。

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

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

個人的には 960 ピクセル以上のビューポート用にデザインしたいと思っていますが、いつでもできるとは限りません。そのため、場合によっては、760 ピクセル以下のビューポート (800 ピクセル幅のディスプレイ、最大化) 用に設計するのが最も安全な場合もありますが、少なくともデスクトップでは、この制限を最終的に完全に破棄することができます。非常に急速に近づいています。

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

プライマリナビゲーションについても同様です。

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

browser - 推奨される Web サイトの解像度 (幅と高さ)?

23 に答える 23

Related

Reference