Bootstrap 3/4またはその他のフレームワークに続いて、メインコンテンツの最大幅の点で不一致に気づきました。例えば:
グーグルアナリティクスからのデータは、ほとんどのユーザーが1366x768の画面解像度を約12.76%持っていることを示しています。
標準と画面の解像度に基づいて最適な最大幅を決定するために使用できる原則/ルールは何ですか?
ありがとう
「最適な」最大幅はコンテンツによって異なります。 Web Accessibility Initiative は、行の最大長を80文字にすることを提案しています。コンテンツのレイアウト、デザイン、フォントの選択、レスポンシブな動作に応じて、最適な幅は異なります。たとえば、3列のレイアウトでは、適切な行の長さを維持しながら最大1600pxを使用できる可能性がありますが、1列のレイアウトでは同じことを行うのに苦労します。
原則として、私はコンテンツに基づいて最大幅を設定することを試み、Pectoralis Majorが述べたように、視聴者の画面サイズに基づいて異なるレイアウトを提供します。
標準と画面の解像度に基づいて最適な最大幅を決定するために使用できる原則/ルールは何ですか?
Max-widthが大きすぎると、ユーザーに恐ろしい体験をもたらす可能性が非常に高くなります。それはあなたが幅を生きることをいとわないものですか?
重要なデータ、ナビゲーション、UI(購入ボタンなど)を表示するためにユーザーに水平スクロールを強制したくない場合は、最大幅を狭くする必要があります。
幅が広すぎるかどうかは、デザインとユーザーベースに大きく依存します。それでも、素晴らしいデザインを表示したいので、ユーザーを投棄しないようにする必要があります。
一方、あなたまたはあなたの会社が、1600ピクセル以上のディスプレイを使用するユーザー向けのスタイルを作成するために時間とお金を費やすことをいとわないのであれば、先に進んでください。
これは、最大解像度を参照するための私のお気に入りのサイトです: https://www.hobo-web.co.uk/best-screen-size/
重要なポイントは、次のことです。
最大幅は、ユーザーの解像度の幅全体に及ぶ必要はないことに注意してください。 4Kディスプレイを使用しているユーザーは、左側と右側に大きな空白の列が表示されることに慣れています。ここに、これらのマージンに関する やや関連する質問 があります。
標準と画面の解像度に基づいて最適な最大幅を決定するために使用できる原則/ルールは何ですか?
すべてのユーザーがサイトを快適に閲覧できるように、さまざまな画面解像度に複数のバージョンを提供できます。
12.76%は87,24%に比べてそれほど多くないので、すべての人にその解像度を使用しても意味がないので、携帯電話、タブレット、および小さい/大きい画面解像度のバージョンを提供する必要があります。