html - iPad 视网膜图像 CSS

Question

我有一组尺寸为 2048 x 1496 的图像，我仅将其用于 iPad Retina 显示屏。我的网站仅针对 iPad Retina，因此我现在不必担心降采样或其他任何问题。我刚刚创建了仅供 Retina 显示的网页。

我有指定图像的 css 和 html(作为背景图像)。但是当我在 Retina 上看到页面时，它不是完全可见的，而是部分可见的。

为什么图像实际上是 2048 x 1496 像素？有没有什么设置要做。

Answer 1

您是否尝试过在以大型视网膜图像作为背景的元素上设置“背景大小”属性？

它看起来像这样:

#retinaImage {
 background: url(images/huge-retina-image.jpg) no-repeat;
 width: 1024px;
 height: 768px;
 background-size: 1024px 768px;
}

iPad 的分辨率是 2048x1536，但在“CSS 像素”中仍然是 1024x768 - 只是这些 CSS 像素中的每一个都包含 4 个设备像素。从概念上讲，您可能很难理解这一点。这是一篇可能有帮助的文章:

Towards a Retina Web (Smashing Magazine)