アダプティブ/レスポンシブ ウェブサイトが可能な限り多くのデバイスに対応するために設計する必要がある理想的な/典型的な幅は何ですか?
以下は私がデザインしたいサイズです。これらすべてがあなたのニーズに理想的であるとは限らないかもしれませんが、これは、世の中で最も一般的なデバイスの構成に対応する傾向があると思います。デバイスの幅を参照すると、「 デバイスに依存しないピクセル :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スケールの電話の標準的なデバイス幅です。
幅320px以上のデザインです。サイズの範囲が絶えず増加しているため、特定のデバイスサイズのセットを設計するべきではありません。デバイスサイズの包括的なリストは、長い間包括的ではありません。
現在の傾向は、デバイスの幅ではなく、コンテンツを考慮してブレークポイントを設計することです。このアプローチは今後うまくいくと思います。すぐに陳腐化することはないと思います。
いくつかの記事:
http://www.netmagazine.com/tutorials/determining-breakpoints-responsive-design
http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/
http://webdesignerwall.com/tutorials/setting-breakpoints-in-sensitive-design
http://mobile.smashingmagazine.com/2012/10/24/beyond-common-media-query-breakpoints/