モバイル端末のビューポートサイズのまとめ

レスポンシブ・ウェブ・デザイン（RWD）を実施することにあたって、CSSのメディアクエリを利用することが一般的である。

理論的には、RWDでは、決してターゲット端末ということを考えることはない。なぜなら、RWDはまさにその様なデバイス別設計を防ぐために生まれたものであるからである。

しかし、実際にクライエントとやっていく中で、ターゲット端末を決めつつ、RWDをもとめられることが少なくない。

その時に一般的によく使われている端末のビューポートのサイズ（width）を知っておくと便利。

以下に人気な7つのデバイスのビューポートサイズを記載している。それを基準にメディアクエリを決めることはできる。

※1 拡大モードでは320 px
※2 拡大モードでは 375 px

そこで例えば、Nexus 7 を含めて、そしてそれ以降のサイズの端末をターゲットするためのメディアクエリを以下の様な書き方にすることができる。

@media screen
and (min-device-width: 600px){
}