スマートフォン用のサイト制作をするとき、metaタグで「device-width」を指定しますが、これは、端末の横幅に応じて表示させるための指定です。では、この「device-width」とはどういうものなのか。

device-widthとは

device-widthとはそれぞれの端末にある画面の解像度をdevicePixelRatioの値で割ったものになります。devicePixelRatioというのは、1×1pxの画像を画面上で何pxで表示させるかを決める値で、1、1.5、2の値があります。
例えば、iPhone3GSなどの機種の場合、devicePixelRatioは1なので、画面解像度320×480pxを1で割るので、device-widthは320×480pxとなります。iPhone5では、devicePixelRatioは2で画面解像度が640×1136pxなので、それを2で割ってdevice-widthは320×568pxとなります。

devicePixelRatioによる画像表示

先程でてきたdevicePixelRatioですが、値の違いによって画像の見え方も変わってきます。例えば、横100pxの画像を表示させたとき、devicePixelRatioの値が1のデバイスでは、そのままきれいに表示されますが、devicePixelRatioの値が2のデバイスでは、横100pxの画像はぼやけた感じで表示されてしまいます。このようなときには、横200pxの画像を用意して、実際に表示させたい大きさの100pxをHTMLやCSSで指定してあげると両方ともきれいに画像が表示されます。

<h1><img src="images/logo.png" alt="" /></h1>

/* CSS */
h1 img {
  width: 100px;
}

devicePixelRatioに合わせた背景画像の指定

アイコンなどを背景画像で表示させたりする際も、以下のようにCSSで指定することで、画像を切り替えることができます。

@media screen and (-webkit-min-device-pixel-ratio:2) {
  .example {
    background-image: url(ここに大きい画像を読み込む);
    background-size: 20px 20px;　/*実際に表示させたいサイズ*/
  }
}

当然、画像サイズを大きくすれば容量も増えますので、きれいに見せることと容量の大きさのどちらを優先させるのかはよく考えたほうが良いでしょう。

おすすめの記事