Question

我想在Mobile Safari（iPhone，iPod，iPad）中显示非常宽的全景图像。这些在OS X Safari和其他浏览器中都可以正常工作，但在Mobile Safari上，最大图像宽度似乎有限制。

考虑这个网页：

使用此来源：

<!DOCTYPE HTML>
<html>
<head>
<meta name = 'viewport' content = 'width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
<title>Test Image 1</title>
</head>
<body>
<p>
2415 x 750 (about 3.2:1)
<p>
<img src='http://farm5.static.flickr.com/4129/4987348894_76194e79d6_o.jpg' />
</body>
</html>

它完全符合我在Mobile Safari上的要求。你可以平移照片。纵横比约为3.2：1。

但是更大的图像，大约4：1，缩小了，如本页所示：

[http://]basepath.com/public/test2.html

[我的低声誉阻止我提供上述链接。仅限于一个。]

除评论和图片外，来源相同：

<!DOCTYPE HTML>
<html>
<head>
<meta name = 'viewport' content = 'width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
<title>Test Image 2</title>
</head>
<body>
<p>
3028 x 750 (about 4:1)
<p>
<img src='http://farm5.static.flickr.com/4113/4994072964_1a7f7f90fe_o.jpg' />
</body>
</html>

您必须在Mobile Safari上查看这些内容才能看到问题。

在你回答之前，还有其他一些事实：

图像＃2不起作用，仅为200K（JPEG质量非常低）。图像＃1确实是700K。所以尺寸不是问题。
在IMG元素上放置明确的宽度和高度确实可以使图像尺寸合适，但它会按比例放大，因此会出现锯齿状。我想要实际像素。因此，问题似乎是最初加载图像，而不是处理图像。
我在没有视口元素的情况下尝试过，没有效果。

好的，现在我的问题：

实际上，Mobile Safari显示图片的宽度是否有限制？有没有人知道它的文档，如果有的话，规则是什么？
有什么方法可以解决这个问题吗？为了完成这项工作，我试着构建动态HTML，但是，正如我上面所说的那样，我认为问题发生在第一次下载图像时，对于JavaScript中的任何事情来说都太早了有效的。

Answer 1

我发现了一些关于图像是否会在移动游侠中自动缩小尺寸的应用规则：

http://teknocat.org/blog/computer-stuff/web-development/show/6/mobile-safari-background-image-scaling-quirk

Answer 2

游戏后期，但我遇到了同样的问题，并最终从马口获取信息：Apple Safari Docs在知道iOS资源限制主题下。很多潜在的陷阱在那里。

Answer 3

如果您正在使用具有背景属性的DIV并且您知道图像的大小，则将背景大小属性设置为图像宽度和高度。

background-size:3028px 750px

如果使用img标签，则设置宽度和高度值

<img src="image.jpg" width="3028px" height="750px" />

然后它应该工作。

Mobile Safari中的最大图像宽度？在panos上进行不必要的降尺度调整

3 个答案: