iOS Safari Mobile：不显示正确尺寸的大图像答案

【问题标题】：iOS Safari Mobile: Doesn't show huge images in correct sizeiOS Safari Mobile：不显示正确尺寸的大图像
【发布时间】：2012-06-29 20:58:45
【问题描述】：

当我显示宽度为 1600 像素的图像时，它会正确显示。但是当我显示一个宽度为 1920 像素的图像时，Safari 显示的图像要小得多。

我用：

<!-- in the header -->
<meta name="viewport" content="width=device-width;" />

<!-- correct -->
<img src="content/dummy/brand_backgroud_1600_1.jpg" alt="">

<!-- to small -->
<img src="content/dummy/brand_backgroud_1920_1.jpg" alt="">

如何在不设置元标记的整体宽度的情况下解决此问题？

这发生在装有 iOS 5.1 的 iPhone 和 iPad 上

编辑： 即使使用这个最简单的 html 页面：

<!DOCTYPE html>
<html lang="de">

<head>

    <meta charset="UTF-8" />

    <meta name="description" content="" />
    <meta name="keywords" content="" />

    <title></title>

</head>

<body>

    <img src="content/dummy/brand_backgroud_1920_1.jpg" alt="">
    <img src="content/dummy/brand_backgroud_1600_1.jpg" alt="">


</body>
</html>

我得到这个结果：

【问题讨论】：

不确定，但 safari 可能试图为用户提供“帮助”。
绘制巨大的图像可能会在移动设备中被利用。我认为这只是因为 safari 试图保护用户、电池电量等......它也写了here
谢谢，我明白了。但真正困扰我的是，它没有以与其他内容元素的正确关系显示。它比 1600 像素的图像小得多。我可以接受一个向下采样的版本，但与其他元素有正确的关系。而且 iPad3 有 2048px 宽度，所以为什么不使用它。 :)

标签： html css ios mobile-safari

【解决方案1】：

一种方法可能是将图像宽度设置为“100%”，将高度设置为“自动”。这样，所有图像，无论其像素宽度如何，都将显示为其父容器的全宽。这实际上也是一个支持 Retina 的巧妙技巧。

编辑：好的，现在我明白你在说什么了。您希望用户看到全尺寸的 1600 或 1920 图像，并且您不希望 iOS 对其进行缩放。

编辑#2：所以我尝试了几种不同的方法——你是对的。当图像大小高于某个 px 值时，iOS 似乎正在“缩放”没有明确设置宽度或高度的图像。当您明确设置它们时，它们会按预期工作。这似乎是您目前唯一的解决方案。

<img src="image_1600.jpg" alt="" style="width: 1600px; height: auto" />
<img src="image_1920.jpg" alt="" style="width: 1920px; height: auto" />

【讨论】：

我也想过这个问题。问题是，如果你不知道图像有多大，你就不知道容器的大小。因此，图像可能会被缩放。
这似乎不起作用（请参阅更新的问题），还是我错过了什么？
@insertusernamehere 它不应该是这样的。这很奇怪。你能把原始图片贴在某个地方让我更深入地了解一下吗？一个疯狂的猜测：可能是在图像本身的 META 信息中，它指定了某个数字的 DPI。
我已将它们放入保管箱。它们都在 Photoshop 中进行了下采样（从更宽的图像中），而不是保存为 JPG 以供网络和设备使用：dl.dropbox.com/u/1336931/_Stackoverflow/image_1920.jpg 和 dl.dropbox.com/u/1336931/_Stackoverflow/image_1600.jpg
感谢您的所有努力。我很高兴，这似乎是 iOS 的典型行为。