2014-11-22

2014-11-22

densityに基づいたビューポートAdd Star

 

 

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

 


ビューポート

  • ブラウザがデフォルトで設定するビューポート
  • iOSAndroidに標準で搭載されたブラウザは、ビューポートの横幅をデフォルトで、800pxまたは980pxに設定します
  • デスクトップ環境では、ブラウザ画面がビューポートとして扱われます

densityに基づいたビューポート
  • ビューポートをデバイスの解像度とdensityに基づいた横幅に設定すると、異なるデバイスの幅でもコンテンツが同じ大きさで見えるようにすることができます
  • レスポンシブWebデザインでは、この横幅を利用します

デザインを切り替えるための横幅の決定

  • 画面サイズをいくつかの範囲に切り分け、範囲ごとにWebページのデザインを切り替えることになります

 

f:id:web-responsible:20130328011658j:image