retina-display - Retina ディスプレイと ppi

Question

同じ解像度 (ppi) を使用して、Retina ディスプレイ画面の画像サイズを 2 倍にすることはできますか? たとえば、200x400 72ppi の画像には 400x800 72ppi の画像を使用しますか? まったく同じに見えるでしょうか？フォントサイズはどうですか？

score 0 · Accepted Answer

基本的にDPIは関係ありません。Web はピクセルの幅と高さを表示するため、デバイスピクセル比が 2 の場合、画像は正確に 2 倍にする必要があります (Apple はこれを retina と呼んでいます)。

画像の外でテキストを使用している場合、ブラウザ自体が必要なピクセルを作成します。

テキストが画像ファイルにある場合は、サイズを 2 倍にする必要があります

score 0 · Accepted Answer

私はこれを自分で実験してきました。2倍のサイズの画像ではなく、高解像度の画像を使用できないのは奇妙に思えます。

あなたの質問への答えとして、はい、画像をサイズに合わせる必要があります。画像は 4x ピクセルの深さのサイズにする必要があることを読みました。たとえば、200px x 300px の画像は 400px x 600px として作成し、css で画像を 50% にする必要があります。

ウィンドウのサイズに応じて画像のサイズが変更される完全なフレームワークでは、これを実装するのが難しい場合があります。

画面の幅に応じてサイズが変更される列 div の Retina ディスプレイイメージの CSS をいくつか試しました。動作しているようで、div は 50% でスタイル設定された Retina ディスプレイイメージでイメージを保持します。

CSS:

.columnLeft{
float: left;
width: 30%
max-width: 200px;
min-width: 100px;

}
.imageHolder{
float: left;
width: 100%

}
.imageHolder img{
width: 50%
}

div:

<div class="columnLeft">
    <div class="imageHolder">
       <img src="images/airline.jpg"/>
</div>

2 に答える 2