iOS Safari移动版：无法正确显示巨型图像的大小

Question

iOS Safari移动版：无法正确显示巨型图像的大小

3

当我展示一张宽度为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="">

如何在不在meta标签中设置整体宽度的情况下解决这个问题？

这种情况发生在iPhone和iPad上，使用的是iOS 5.1。

编辑：即使在这个最简单的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>

我得到了这个结果：

输入图像描述

（注：该段文字为翻译内容，不是需要翻译的内容）

- insertusernamehere

2

不确定，但Safari可能试图对用户“有所帮助”。 - Linuxios

1

绘制巨大的图像可能会在移动设备上被利用。我认为这只是因为Safari正在尝试保护用户、电池电量等等... 这也在这里写明了：http://www.tomshardware.com/reviews/ipad-3-benchmark-review,3156-5.html - Cemal Eker

谢谢，我能看到。但真正困扰我的是，它与其他内容元素的关系显示不正确。它比1600像素的图像要小得多。我可以接受一个降采样版本，但要与其他元素保持正确的比例。而且iPad3的宽度为2048像素，为什么不使用它呢。 :) - insertusernamehere

1个回答

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

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

- Joshua · Accepted Answer

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

编辑：好的，现在我明白你的意思了。您希望用户看到完整大小的1600或1920图像，并且您不希望iOS对其进行缩放。

编辑＃2：所以我尝试了几个不同的方法-您是正确的。当图像大小超过某个像素值时，iOS似乎会“缩放”未明确设置宽度或高度的图像。当您明确设置它们时，它们按预期工作。这似乎是您目前唯一的解决方案。

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