iPad Retina Images CSS

Question

我有一组大小为 2048 x 1496 的图像，我只将其用于 iPad Retina 显示屏。我的网站仅针对iPad 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 个设备像素。 从概念上讲，很难解决这个问题。 这里有一篇文章可能会有所帮助：

走向视网膜网络（粉碎杂志）

Answer 2

阅读 Chris 分享的文章（Towards A Retina Web）。您不需要使用 2048 x 2744。1024 X 768分辨率的图像就足够了。Ipad Ratina显示屏将自动处理其分辨率。

使用 1024 X 768 分辨率。您将在小文件大小中自动获得更好的显示图像。不需要在 CSS 中使用背景大小。