情報量の多いWebアプリケーションを開発しています。つまり、画面で表示に使用できるすべてのピクセルは、UIが乱雑に見えるのを避け、関連データを表示するのに大きく役立ちます。
私は疑問に思っていました:「一般的な」画面解像度はどれですか?数年前は1024×768のようなものでしたが、現在ではもっと高いものに違いありません。私は開発者であり、おそらく平均的なJoeユーザーよりも大きな画面と解像度を持っているので、使用するものに依存することはできません。
では、現在推奨されているWebアプリケーションの解像度はどこにありますか?
それは本当にあなたが世界のどこにいるかに依存します。ワールドワイド1366x768が依然として最も一般的ですが、1920x1080が唯一の解像度ですそれは実際に巻き上げで増加しています(おそらくこれが現代のラップトップの標準的なワイドスクリーンのように思われるためです)。
ウェブサイト StatCounter.com は、これについてさらに知識を深めるのに役立ちます。
[〜#〜]ただし[〜#〜]、特定の解像度が他の解像度よりも一般的であるからといって、これは実際にはかかりませんユーザーのブラウザウィンドウの幅を考慮します。残念ながら、この統計の既知の測定値はほとんどありません(Googleアナリティクスはこれを提供するために使用されていましたが、サポートを中止しました)。
ラップトップとデスクトップだけがWeb対応デバイスではなくなったことに注意してください。 iPadの解像度は1024x768、iPhone 4の解像度は960x640で、横長モードでの使用を想定しています。
最小画面解像度の選択はすべて、除外したいユーザーの数によって決まります。
特定のユーザーの解決データの履歴がない場合、1つのオプションは、ガイドラインとして public、global usage statistics を使用することです。そのようなグローバルデータの1つのソースを使用して、デスクトップ画面の幅の状態を一目で伝えるのに役立つ次のグラフを作成しました。
「しかし、最近はもっと高いものに違いない」
ここでのすべての回答は、モバイルの世界全体を無視しているようです。
確かに、デスクトップ画面は大きくなっています。しかし、誰もがモバイルデバイスを使用しています。現在、ウェブの多くは携帯電話やタブレットでアクセスされています。
適応設計は、実際に進むべき道です。
「利用可能なものは何でも」に適応して設計してみませんか?
JavaScriptを使用すると、ブラウザウィンドウのサイズを確認し、スタイルシートを変更できます。たとえば、960 pxの列を持つグラフィックが豊富で大きな画像の背景がある場合、1024〜768を実行している場合は背景画像は必要ないため、読み込む必要はありません。フォントサイズを変更して、画面上の利用可能な領域を最大限に活用することもできます。
2011年の最も一般的な解像度は1280x800です。インターネットのユーザーの18.09%が使用しています。
2011年のトップ10の解像度は次のとおりです。 http://www.superiorwebsys.com/blog/93/Most_Common_Screen_Resolutions_in_2011/
Jonは、Webアプリを設計するときにベースとして全画面解像度を使用するように注意する必要があることに同意します。 768のワイドスクリーンバリアントが最近非常に一般的であると述べたときも、彼は正しいです。
しかし、私は最近、自分の画面解像度ポリシーを下げる非常に良い理由をいくつか経験しました。 TVとマルチメディアラップトップは、解像度としてHD標準を使用するようになりました。つまり、複数のユーザーが解像度として1280×720を持つ可能性が高いということです。高さとして768をターゲットに設定することは、多くのユーザーにとって少しから多すぎるかもしれません。
静的レイアウトを使用したデスクトップ/ラップトップ画面で安全を確保したい場合は、1024x768以上を使用し続けてください。しかし、より良いオプションは、流動的な(柔軟な)レイアウトを設計することです。
Microsoftが最近投稿した Windows 7ユーザー向けのこの領域のテレメトリデータ :
(少なくともアップグレードサイクルにいるユーザーの場合)、4:3ではなく16:9と16:10の画面を実行しているユーザーが非常に多いことがわかります(複数のユーザーが1366×768で実行しています)。 。
はい、フレキシブルレイアウトを検討してみてください。利用可能なすべてのピクセルを使用する場合は、javascriptを使用する必要があるため、全画面をカバーするのが最適なソリューションです。 ALAの Responsive Web Design に目を通し、 example を確認してください。この例を表示するときは、ブラウザーのサイズを変更して、コンテンツの反応を確認してください。これにより、デスクトップ、ラップトップ、携帯電話のタブレットなど、どの画面でも見栄えが良くなります。
私は1280 X 1024をターゲットにしており、モバイルの制約が要因である場合、レイアウトは適応型になります。
それ以外の場合は、通常は分析に頼り、特定のサイトの上位の解像度に注意するようにします。
考慮すべきいくつかのこと:
1024向けの設計はWebにとって安全な手段ですが、決定を下す前にユーザーについて詳しく知りたくない場合は、面倒です。
1024 * 768は常識として残っているはずです。そうでなければ、それは本当にあなたの聴衆に依存します。たとえばデザイナー向けのウェブサイトやアプリを作成する場合は、1680 * 1050のようなはるかに高い解像度に最適化する必要があります。
テストするか、目的の聴衆に尋ねる必要がありますが、1024 * 768はまだ必要です!
理想的な世界では、解像度やデバイスごとに異なる(CSS)スタイルがあります。 :)
一般的なプロジェクターの解像度: