iPad视网膜图片CSS

Question

iPad视网膜图片CSS

htmlcss

3

我有一组大小为2048 x 1496像素的图像，我仅用于iPad Retina显示屏。我的网站只针对iPad Retina屏幕，因此现在不必担心下采样或其他任何问题。我已经创建了仅供Retina显示的网页。

我有CSS和HTML指定这些图像（作为背景图像）。但是当我在Retina上查看页面时，它并没有完全可见，只有部分可见。

为什么会这样，当图片实际上是2048x1496像素？是否需要进行任何设置？

- user1821499

如果您在iPad上使用Safari或Google Chrome浏览器查看您的网站，您应该知道浏览器工具栏会占用空间。 - Shiplu Mokaddim

@ Brad，是的，我已经设置了视口。<meta name = "viewport" content = "width=device-width, minimum-scale=1, maximum-scale=1"> @NickD，它甚至不到一半，只有一部分可见。 - user1821499

展示CSS和/或HTML是否有帮助？ - vgoff

我认为显示器的像素与背景图像的实际像素大小不同。尝试使用1024 x 748的图像，你可能只看到了图像的左上象限。我已经阅读了这里和谷歌上的一些其他帖子，解释了像素密度以及它在这种情况下的应用。 - NickD

当我添加了一个具有精确宽度和高度的包装器时，它起作用了，但现在我有一个简单的HTML页面，只有一张图片，但它没有显示出来。图片的尺寸是2048乘以2744。它只显示一个白色的空白页面！就像这样，<!doctype html> <html> <head> <meta charset="utf-8"> <meta name = "apple-mobile-web-app-capable" content = "yes" /> <title>IOS</title>  <link href="css/reset.css" rel="stylesheet" type="text/css" /> <link href="css/styleiPad4.css" rel="stylesheet" type="text/css" /> </head> <body> <img src="Images/Retina/Test.png"> </body> </html> - user1821499

显示剩余2条评论

2个回答

1

阅读由Chris分享的文章（走向视网膜Web）。您不需要使用2048 x 2744。1024 x 768分辨率的图像就足够了。iPad Ratina显示屏会自动处理其分辨率。

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

- Tarun

2

如果您想提供Retina图像，则必须使用真实的2048x1536分辨率 - iPad会将较小的图像升级，但质量会受到影响。 - Chris Herbert

在这种情况下，使用jQuery检查您的浏览器分辨率。$(document).height()和$(document).width()。如果它返回1024宽度和768高度，则您没有其他选择。关于升级，您是正确的，因为任何应用程序都可以尝试，但无法给您100％的结果。关于图像质量，这是iPad的工作方式，所以我们无能为力:(。但是，在1024 X 768中，您的图像质量也会很好，因为在iPad中，像素密度非常高，因此您的图像看起来不像缩放或像素化。 - Tarun

2

你有另一个选择 - 指定一个2048x1536像素的图像作为背景，然后将background-size设置为1024x768。那么图片将保持完整的质量并完全可见。 - Chris Herbert

@ChrisHerbert 如果这样的话，你的图像将始终看起来与1024 X 768相同。不同之处在于它需要更长的时间来加载。因为这是iPad技术，可以在显示器中添加像素。CSS对此无能为力。 - Tarun

2

@Tarun - 你误解了iPad的工作原理。如果在iPad上将图像缩放到1024，而源图像为2048，则它仍将以2048px分辨率呈现。这是因为iPad使用虚假的1024分辨率来布局页面。告诉Safari应该将图像呈现为1024像素宽并不会将原始图像降采样为1024px。 - NickG

实际像素（2048）和“虚拟像素”（1024）之间确实存在差异。这是在window.devicePixelRatio下找到的“设备像素比”。对于Retina设备，这是2。对于布局中的每个“虚拟”像素，有2个物理像素。 - markmarijnissen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Herbert · Accepted Answer

您尝试过在拥有大型视网膜图片背景的元素上设置“background-size”属性吗？

它看起来应该是这样的：

#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)