2013-03-21 154 views
7

我有一个HTML页面,其中包含1675px×2640px的图像。我尝试在iPad中查看它,显然移动Safari会降低图片的样本。我们想要显示高质量的图像,但Safari限制了这一点。移动Safari浏览器下采样大图像。如何保留?

我一直在寻找解决方案来保留图片大小。我一直在iPad 3上使用移动Safari进行查看。人们建议使用其他浏览器,但默认情况下我们正在使用移动Safari。

是否有任何CSS,JavaScript或其他解决方案限制?

+0

你能告诉我们你的html页面的链接吗? – kyooriouskoala 2013-03-21 07:56:11

回答

3

我相信你只是喜欢这个答案,但简短的答案似乎是:“你不会得到1:1的大尺寸图像”。

稍微长一点的答案是,苹果有意强迫这些东西以这种方式工作,因为之前它的工作方式只是不加载图像或崩溃。现在

,为更全面的答案与引文...

Apple's Known Resoruces Limits

的事情是,当图像被解码/解压缩它占用了大量的整个赫克比的图像更多的内存空间文件大小。其计算公式苹果指出的是,与512MB的RAM器件,像你提到的iPad 3的,将拒绝超过5百万像素,从而导致非JPEG图像:

height * width <= 5 * 1024*1024 

对于JPEG,苹果公司指出,他们将进行二次采样,以便您要查看JPEG文件:

JPEG的最大解码图像尺寸是使用子采样的32百万像素。 由于二次采样,JPEG图像可以达到3200万像素,这允许JPEG图像解码为具有十六分之一像素数量的大小。对大于2百万像素的JPEG图像进行二次采样 - 即将其解码为缩小尺寸。 JPEG子采样允许用户查看最新数码相机的图像。

请注意,它规定2百万像素是全尺寸查看JPEG的限制,即2 * 1024 * 1024。由于您的图像大概超过4百万像素,因此它将在iPad 3上进行二次采样。并且,如果不使用外部程序,则无法强制执行任何操作。

要使用外部程序的最小的改善,看到这个链接,当一个人建议GOODREADER:Apple Forum, Seeking Full Image Resolution in MiniSfari

这里是另一个#1具有类似问题/答案对:Image Size Limitations in Mobile Safari

1

享受iPad上的Retina视网膜功能和iPhone 4/5的使用增加了一倍大小的图片如下:

<img src="test.jpg" width="837" height="1320" /> 

注意尺寸减小一半,但test.jpg放在不要求调整。

或者,也可以准备另一组的高分辨率图形,并且当检测到视网膜画面时显示它,使用媒体查询(Modernizr的)

像素密度理论值: Retina屏幕把2个像素为1个像素,例如与320px宽度,它实际上包含640px内容。在这里阅读更多信息:http://www.sitepoint.com/css-techniques-for-retina-displays/

3

Mobile Safari does not downsample progressive JPEGs.假设JPEG是一种可接受的格式为您的目的,只需将其转换为渐进式编码。假设您有一个现有的非渐进式JPEG图像,您可以使用诸如jpegtran之类的工具将编码无损地转换为逐行扫描。

+0

但是,如果图像非常大 - 它会导致加载错误。 对于方面宽度/高度= 1.5我得到下一个值: 最大加载的渐进式JPEG - 2804x1869, 最大加载的基线JPEG无下采样 - 1774x1182, 最大加载基线JPEG与下采样 - 10816x7210(向下取样,以1352x746)。 值得iPhone 3GS与256 RAM。 iOS 5.1.1。 – Enyby 2013-09-08 11:11:54

+0

@Enyby - 任何浏览器都有内存限制。即使是桌面级浏览器也可能会在加载大量图像时出现内存不足的情况。在这个时代,256MB并不是很多。 – Unsigned 2013-10-08 17:18:43