使用CSS3和JavaScript的iPhone 5的視網膜圖像

我已經將所有圖像尺寸標準配置爲288W x 345H。對於Retina 576W x 690H。使用CSS3和JavaScript的iPhone 5的視網膜圖像

我爲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>

來源

2012-11-30 Irishgirl

所以，你想背景圖像的大小在一半或img標籤內的圖像？ – zvona

圖像將用於滑動功能。我的圖像爲retina [email protected]（retina）和1a.png（標準）。我將使用CSS3和JavaScript。理想情況下，我想使用大多數視網膜來將工作量減半。 – Irishgirl

剛剛意識到背景大小可能不正確。我不知道如何接近視網膜圖像刷卡。 – Irishgirl

背景尺寸適用於背景。 http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size

在這裏插入您的圖像與<img>標籤，所以背景大小不會解決您的問題。

你有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解決方案： 視網膜圖像將只加載在視網膜和高於72dpi的設備上。

缺點對CSS3的解決方案： 如果你有一個CMS後端它不能擴展這不是無障礙&語義

或導出圖像具有相同的分辨率視網膜好（288x345 ），但150 DPI。該文件將更大，但它應該工作。

優點的DPI解決方案： 你只有一個圖像管理&很容易與CMS

缺點的DPI解決方案中使用： 你的文件是更大的負載，這不僅影響高設備比72dpi

無論如何有這個問題的JavaScript解決方案。

祝你好運

來源

2012-12-18 00:53:15 vinzcelavi

使用CSS3和JavaScript的iPhone 5的視網膜圖像

回答

相關問題