[CSS][モバイル]Retina対応
Retinaディスプレイ対応
デバイスピクセルとCSSピクセル
- デバイスピクセルとは…デバイス(端末)ごとのピクセル数
- CSSピクセルとは…3.5インチの画面上で表現されるサイズ
- CSSを記述する際は、基本的にCSSピクセルの数を基準に設計する
- 「デバイスピクセル」を「CSSピクセル」で割った数値、倍率を「devicePixelRatio」という
(引用元: 高解像度ディスプレイへの対応 - WEBサイト制作の勉強)
imgを挿入する際のCSS記述
- devicePixelRatioに応じた画像の解像度を用意すると、デバイスピクセルに等倍の美しい画像が表示できる
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>Retinaディスプレイのメディアクエリー</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="box"></div> </body> </html>
/* 枠を設定 */ #box{ width: 320px; height: 320px; background: url(img/bg01.png) no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { /*640*640の画像を320*320の枠内に貼り、100%に表示することでretina対応*/ #box{ background: url(img/bg02.png) no-repeat; background-size: 100% 100%; }