携帯端末のビューポート

1.layout viewport(レイアウトビューポート)
一般的なモバイルデバイスのブラウザでは、デフォルトでviewportメタラベルが設定されており、仮想layout viewport(レイアウトビューポート)width=device-width、すなわちlayout viewport(レイアウトビューポート)の幅をideal viewport(理想ビューポート)の幅に設定します.
2.visual viewport(ビジュアルビューポート)と物理ピクセル
物理スクリーンの可視領域、スクリーンディスプレイの物理画素、同じサイズのスクリーン、画素密度の大きいデバイス、ハードウェア画素が多くなります.

iPhone5 ：640 * 1136
iPhone6：750 * 1334
iPhone6 Plus：1242 * 2208

3.ideal viewport(理想的なビューポート)は、通常、画面解像度です.変えられない
モバイル端末の携帯電話の画面は通常解像度を設定することができなくて、普通はすべて設備メーカーのデフォルトの設定の固定値で、言い換えればdipの値はideal viewport(理想的なビューポート)(つまり解像度)の値で、例えばiPhoneの画面の解像度:

iPhone5 ：    320 * 568，     640 * 1136，@2x
iPhone6：    375 * 667，     750 * 1334，@2x
iPhone6 Plus ：    414 *  736，    1242 * 2208，@3x

1.dip(デバイス論理ピクセル)
デバイスのハードウェアピクセルには関係ありません.1つのdipは、任意の画素密度のデバイス画面上で同じ空間を占めている.
2.CSS画素
CSSピクセル(px)は、ページレイアウトの単位に使用されます.スタイルの画素サイズ(例えばwidth:100 px)は、CSS画素単位で指定される.CSS画素とdipの割合はウェブページのスケーリングであり、ウェブページがスケーリングされていない場合、1つのCSS画素は1つのdip(デバイス論理画素)に対応する.
http://www.css88.com/archives/5975