-1

Retina を iPhone アプリ (HTML、CSS3、および JS) で動作させようとしています。iphoneアプリ用です。

以下のように試してみましたが、以下の 2 つの .png 画像では機能しませんか?

HTML:

  <div id='slider13' class='swipe; myImage; myImage2;'>
<ul>
<li style='display:block'><div><img style="vertical-align: bottom" src="**images/10a.png**" border="0" ></div></li>  
<li style='display:block'><div><img style="vertical-align: bottom" src="images/10b.svg" border="0" ></div></li>
<li style='display:block'><div><img style="vertical-align: bottom" src="**images/10c.png**" border="0" ></div></li>
<li style='display:block'><div><img style="vertical-align: bottom" src="images/7b.svg" border="0" ></div></li>
<!-- <li style='display:none'><div><img style="vertical-align: bottom" alt="" title="" border="0" class="shadow" /></div></li> -->
</ul>

CSS3:

.myImage {
height: 100%;
width: auto;
-webkit-background-size: 100% auto.;
background: url("../images/10a.png");
}
@media screen and (-webkit-min-device-pixel-ratio: 2), 
screen and (max-moz-device-pixel-ratio: 2), 
and screen (max-device-width: 320px) {
.myImage {
    background: url("../images/10a@2x.png");
    }
}
4

1 に答える 1

0

「のみ」が欠落している、単なる構文の問題のようです。試す：

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 1.5) {

}

http://css-tricks.com/snippets/css/retina-display-media-query/にはさらにいくつかのオプションがあります

于 2012-12-13T00:12:57.010 に答える