Question

我正在努力让视网膜在iPhone应用程序（HTML，CSS3和JS）上运行。它适用于iphone app。

我试过如下，它不能用于两个.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

看起来这只是一个语法问题，缺少'only'。尝试：

@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/

还有更多选项

Retina媒体使用HTML查询iphone

1 个答案: