iphone - 使用 HTML 对 iPhone 进行 Retina 媒体查询

Question

我正在尝试让视网膜在 iPhone 应用程序（HTML、CSS3 和 JS）上工作。它适用于 iphone 应用程序。

我已经尝试如下，但它不适用于以下两个 .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");
    }
}

Answer 1

Looks like it's just a syntax issue, missing the 'only'. Try:

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

}

There are some more options at http://css-tricks.com/snippets/css/retina-display-media-query/