0

我的所有图像尺寸标准都是 288W x 345H。对于视网膜 576W x 690H。

我正在为 iphone 5 应用程序使用 CSS3 和 JavaScript (Cordova2.1/Phonegap)。

我已经为 CSS3 视网膜尝试过这个，但它不起作用

    background-size: 288px auto;

HTML：

  <div id='slider' class='swipe'>
<ul>
<li style='display:block'><div><img style="vertical-align: bottom" src="images/1a.png" border="0" ></div></li>
<li style='display:block'><div><img style="vertical-align: bottom" src="images/1b.png" border="0" ></div></li>
<li style='display:block'><div><img style="vertical-align: bottom" src="images/1c.png" border="0" ></div></li>
<li style='display:block'><div><img style="vertical-align: bottom" src="images/1d.png" border="0" ></div></li>
<li style='display:block'><div><img style="vertical-align: bottom" src="images/1e.png" border="0" ></div></li>
<!-- <li style='display:none'><div><img style="vertical-align: bottom" alt="" title="" border="0" class="shadow" /></div></li> -->
</ul>

4

1 回答 1

0

背景大小适用于背景。 http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size

在这里，您插入带有<img>标签的图像，因此 background-size 无法解决您的问题。

您有 2 个解决方案： 首先您更改 DOM 并添加带有背景 CSS 的图像，您将通过以下方式解决问题：

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
   only screen and (min--moz-device-pixel-ratio: 1.5),
   only screen and (min-resolution: 240dpi) {
  [class*="pictos-"] {
    background-image: url("1a-big.png");
    -moz-background-size: 288px 345px;
    -o-background-size: 288px 345px;
    -webkit-background-size: 288px 345px;
    background-size: 288px 345px;
  }

}

CSS3 解决方案的优点： Retina 图像仅在 Retina 和高于 72dpi 的设备上加载。

CSS3 解决方案的缺点： 如果您有一个 CMS 后端，它就不可扩展 这对于可访问性和语义来说不是那么好

或者以相同的分辨率 (288x345) 但使用 150 DPI 导出您的视网膜图像。该文件会更大，但它应该可以工作。

DPI 解决方案的优点： 您只需管理一个图像，并且易于与 CMS 一起使用

DPI 解决方案的缺点： 您的文件要加载更大，这只影响高于 72dpi 的设备

无论如何，这个问题有javascript解决方案。

祝你好运

于 2012-12-18T00:53:15.937 回答