2014-10-14 2014-11-22 2014-11-22 densityに基づいたビューポート RWD density ディスプレイサイズや画像解像度が異なるデバイスにおいて、同じコンテンツが同じ大きさで見えるようにするため考えたれたもの 各デバイスでdpiに応じてdensityの幅が設定されます dpiはデバイスのディスプレイサイズと画像解像度から算出されます densityが「1」のデバイスを基準とし、コンテンツが同じ大きさで見えるように州折りが行われる ppiによるデバイスの分類基準となるdpidensity(device pixel ratio) low 120 0.75 medium 160 1 high 240 1.5 extra high 320 2 ビューポート ブラウザがデフォルトで設定するビューポート iOSやAndroidに標準で搭載されたブラウザは、ビューポートの横幅をデフォルトで、800pxまたは980pxに設定します デスクトップ環境では、ブラウザ画面がビューポートとして扱われます densityに基づいたビューポート ビューポートをデバイスの解像度とdensityに基づいた横幅に設定すると、異なるデバイスの幅でもコンテンツが同じ大きさで見えるようにすることができます レスポンシブWebデザインでは、この横幅を利用します デザインを切り替えるための横幅の決定 画面サイズをいくつかの範囲に切り分け、範囲ごとにWebページのデザインを切り替えることになります