Max image width in Mobile Safari? Getting unwanted downscaling on panos

iphone safari webkit mobile-safari

11,271

Solution 1

I found something about the rules that are applied whether an image is automatically downscaled in mobile safari:

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

Solution 2

Late to the game, but I had the same question and ended up getting the info from the horse's mouth here: Apple Safari Docs down at the Know iOS Resource Limits topic. Lot's of potential gotchas in there.

11,271

Author by

Marc Rochkind

Updated on June 04, 2022

Comments

Marc Rochkind almost 2 years
I want to display very wide, panoramic images in Mobile Safari (iPhone, iPod, iPad). These work fine in OS X Safari and in other browsers, but on Mobile Safari there seems to be a limit on the maximum image width.

Consider this web page:

http://basepath.com/public/test1.html

with this source:
```
<!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>
```
It does exactly what I want on Mobile Safari. You can pan the photo. The aspect ratio is about 3.2:1.

But a wider image, about 4:1, gets scaled down, as seen on this page:

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

[My low reputation prevents me from providing the above as a link. Limited to just one.]

The source is identical except for the commentary and image:
```
<!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>
```
You have to view these on Mobile Safari to see the problem.

Before you answer, some additional facts:
1. Image #2, which doesn't work, is only 200K (very low JPEG quality). Image #1, which does, is 700K. So size isn't the problem.
2. Putting an explicit width and height on the IMG element does indeed make the image the right size, but it's scaled up and therefore has jaggies. I want actual pixels. The problem therefore seems to be in loading the image originally, not processing it for presentation.
3. I've tried it without the viewport meta stuff, with no effect.
OK, now for my questions:
1. Is there in fact a limit on how wide Mobile Safari will show an image? Does anyone know of documentation for it, and, if so, what the rules are?
2. Is there any way to get around the problem? I've horsed around with JavaScript quite a bit to try to construct dynamic HTML to do the job, but, as I said above, I think the problem occurs when the image is first downloaded, far too early for anything done in JavaScript to be effective.
Marc Rochkind over 13 years

Very helpful... thanks Erik! I'll mark this one as the answer.
Guillaume Gendre over 11 years

I use a big css sprite and reached the safari background image limit with a 3000x320px image. the link you posted helped me finding this, even if the limit I had is below the one mentionned in the link. thanks ! see ggendre.posterous.com/warning-io6-css-sprite-max-size-proble‌ms for details