Question

当我显示宽度为1600像素的图像时，它显示正确。但是当我显示一个宽度为1920px的图像时，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>

我得到了这个结果：

enter image description here

Answer 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" />

iOS Safari Mobile：不显示正确大小的巨大图像

1 个答案: