電話/タブレット/コンピューターでWebサイトを設計するのに理想的な幅はどのくらいですか？

Question

アダプティブ/レスポンシブウェブサイトが可能な限り多くのデバイスに対応するために設計する必要がある理想的な/典型的な幅は何ですか？

Andrew Odri · Accepted Answer

以下は私がデザインしたいサイズです。これらすべてがあなたのニーズに理想的であるとは限らないかもしれませんが、これは、世の中で最も一般的なデバイスの構成に対応する傾向があると思います。デバイスの幅を参照すると、「デバイスに依存しないピクセル：Pになります。

1024px

これは、横長モードでの1：1スケールタブレットの典型的なデバイス幅であり、大型のコンピューターモニターにも適しています。

1023-980px

これは、iOSデバイスのデフォルトのビューポート幅（「平均的な」ウェブサイトの幅を表すことになっています）であり、平均サイズのコンピューターモニターにも適しています。

979-768px

これは、Apple iPadの縦モードのデバイス幅です。注：多くの16：9 Androidタブレットにはデバイス幅がありますof 720px： Android Developers：Supporting Multiple Screens

767-480px

これは、横長モードでの1：1スケールの電話の標準的なデバイス幅です。

480-320px

これは、縦長モードでの1：1スケールの電話の標準的なデバイス幅です。

obelia · Answer

幅320px以上のデザインです。サイズの範囲が絶えず増加しているため、特定のデバイスサイズのセットを設計するべきではありません。デバイスサイズの包括的なリストは、長い間包括的ではありません。

現在の傾向は、デバイスの幅ではなく、コンテンツを考慮してブレークポイントを設計することです。このアプローチは今後うまくいくと思います。すぐに陳腐化することはないと思います。

いくつかの記事：