Search code examples
htmlcssiosmobile-safari

iOS Safari Mobile: Doesn't show huge images in correct size

When I display an image with a width of 1600px it's shown correctly. But when I display an image that has, for example 1920px width, Safari displays it way smaller.

I use:

<!-- 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="">

How can I fix this, without setting the overall width in the meta-tag?

This happens on both, iPhone and iPad with iOS 5.1

Edit: Even with this most simple html-page:

<!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>

I get this result:

enter image description here

Solution

  • One approach might be to set the image width to be "100%", height to be "auto". That way all images, regardless of their pixel width, will appear to be the full width of their parent container. This is actually a neat trick to support Retina too.

    Edit: Ok, now I understand what you are saying. You want the user to see the full-sized 1600 or 1920 images, and you do NOT want iOS to scale it.

    Edit #2: So I tried a couple different things - you are correct. iOS appears to be "scaling" images that do not have width or height explicitly set, when the image size is above a certain px value. When you do explicitly set them, they work as expected. That seems to be your only solution at this point.

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