0

このチュートリアルから学んだ、Retina に最適化されたロゴを表示するための CSS は次のとおりです。

しかし！iPad と Samsung Galaxy Note II (safari、Firefox、Dolphin アプリ) でテストすると、網膜画像が 1200px x 500px のフルサイズで表示されます。

したがって、サイズを変更するのではなく、適切な画像を取得しています。

手がかりを求めて Web を精査しましたが、何も見つかりません。今のところ、網膜画像の提供をあきらめようとしています。何か案は？本当にありがとう！

<div class="logo-splash"></div>

/* CSS for devices with normal screens */
.logo-splash {
height: 250px;
background-size: 600px 250px;
background: url(images/iaay_splash_logo.png) no-repeat center center;
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.logo-splash {
background-size: 600px 250px;
height: 250px;
background: url(images/iaay_splash_logo@2x.png) no-repeat center center;
 }
}
4

1 に答える 1

0

Retina ロゴ画像を作成する最善の方法は、単純に 2 倍のサイズの画像を使用することです。

たとえば、ロゴ画像を 250px x 650px にしたい場合

get 500px x 1300px (ダブル) のバージョンのロゴを取得し、通常のロゴ (この場合は「iaay_splash_logo.png」) を置き換え、それを背景画像として使用する代わりに、この非常に基本的な HTML を使用します

<div class="logo-splash">
   <img height="250px" width="600px" src="images/iaay_splash_logo.png"/>
</div>

Retina ディスプレイでサイトにアクセスすると、単純に同じ画像が取得されますが、ピクセルは 2 倍になりますが、img タグで height="250px" width="600px" で指定したとおり、正しいサイズのままです。

于 2013-10-23T07:01:06.830 に答える