ウェブサイトのデザインに使用するブラウザの幅はどのくらいですか？

私はウェブサイトのグラフィックス部分に取り組んでいて、Photoshopでウェブサイトをデザインするように求められました。Webサイトの平均的な寸法とブラウザーの幅は何ですか？それで、それらの寸法でモックアップを作成できます。

Webデザインの現代では、ブラウザーの幅は無関係です。非常に多くのさまざまなデバイスが世の中に存在しているため、どのサイズの画面でも機能するという点で、デザインをレスポンシブにする必要があります。

これを行うには、ある種の流動幅グリッドシステムを使用し、@ mediaクエリを使用して特定のデバイスをターゲットにする必要があります。

メディアクエリは、ビューポートサイズごとに異なるCSSルールのセットです。メディアクエリは、ブラウザの幅を動的に変更することにも応答します。ブラウザーを小さくすると、ページはフロートをドロップするか、12列から1または2に移動して応答します。応答性は、モバイルデバイスおよびテーブルのユーザーが向きを縦から横またはその逆に変更したときにも反応します。

対象サイズ：

• ポートレートモードの320 x 480モバイルデバイス
• 480 x 640小型タブレットまたは横長モードのiPhone
• ポートレートモードの768 x 1024タブレット
• 横モードの1024 x 768タブレット
• 1200以上のデスクトップブラウザ
• 2900 ++大型メディアディスプレイまたは会議（これは必須ではありませんが、非常に大型のディスプレイでサイトを誰かが見ている場合はどうでしょうか。

この動作を確認するには、フレームレスグリッドをご覧ください。実際には流動的ではありませんが、ブラウザを調整すると、14カラムから1カラムに下がります。

人気のユーザーインターフェイスコンポーネントを使用して構築されたシンプルなCSS、HTML、JSフレームワークであるTwitter Bootstrapも、最新のレスポンシブデザイン手法の良い例です。

もう1つ考慮する必要があるのは、ピクセル密度です。iPhone 4と新しいiPadには、通常の画面の2倍の高さの網膜ディスプレイがあります。これにより、テキストの代わりにスプライトと画像を提供する習慣がほとんど廃止されます。iPadでテキストを含む画像は恐ろしく見えます。

したがって、質問に対する答えは、設計する必要のある標準のブラウザ幅がないということです。ユーザーに基づいて設計を決定し、最も多くの人がアクセスしやすい場所に決定する必要があります。

多くのレイアウトテンプレートは960pxの幅を使用します。これは、一般的な1024pxの画面解像度に適合し、スクロールバー用のスペースを提供し、2、3、4、5、6、8、10、12、16で簡単に分割できるため、列化に最適です。レイアウト。

例については、http：//960.gsを参照してください。

ブートストラップなどの他のフレームワークは、940pxを使用して列間のマージンを考慮しています。

デスクトップブラウザをターゲットにしている場合、必要に応じて、幅約1000ピクセルに簡単に移動できます。

StatCounter画面の解像度

最も一般的なディスプレイが1024ピクセル以上であるのに、なぜ約1000ピクセルですか？スクロールバーとウィンドウクロームを考慮する必要があるためです。

特にモバイルブラウザーをターゲットにしている場合は、幅320ピクセルが適切な選択かもしれませんが、モバイルブラウザーは通常、ビューの幅に合わせてコンテンツを拡大縮小するため、幅950または960ピクセルが最適です。iPhoneなどの高DPIデバイスでは、320 CSS / HTMLピクセルは640デバイスピクセルに相当することに注意してください。

StatCounterモバイル画面の解像度

ターゲット市場も状況を変える可能性があります。テクノロジーに精通したユーザーをターゲットにしている場合は、最新のデバイスに偏っていることが予想されます。政府のサイトを構築している場合は、より広い範囲に対応する必要があります。

また、サイトをどのように構築していますか？Blueprint CSSや960グリッドシステムなどのグリッドシステムを使用している場合は、それによってサイズも決まる可能性があります（ほとんどのグリッドシステムは他のサイズに変更することもできます）。

デスクトップだけでなくモバイルでもうまく機能しようとしている場合は、レスポンシブデザインを検討することもできます。

今回のワールドワイド中傷デスクトップのサイズは1024x768です。1003pxサイズのウェブサイトを作成するのは良いことです...