How set correct width for mobile web page work on iphone

Question

I'm trying set up my mobile webpages for iphone but it fails to show the correct width.

The issue is.. In most of my page's posts they have pictures which have width about 480px to 500px so if I setup up meta as follows:

1 = this will show all part of pictures in the post but the screen of page larger than iphone screen..

name="viewport" content="width=480px; initial-scale=1; maximum-scale=1; user-scalable=1;"

2 = this will show the pages correct with inside iphone screen .. but the right part of images will hidden to outside of screen width in stand mode.

name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=1;"

Please help to set to show full images in iphone and the webpage zoom correct width of screen.

test use iphone at: http://www.xaluan.com/modules.php?name=News&file=article_mobi&sid=242186

arnorhs arnorhs · Accepted Answer · 2011-02-04T02:19:21

You might want to try something like this:

lets say your html looks like this:

<body>
  <div id="wrapper">
    <img src="small-image.jpg" />
  </div>
</body>

you can do this with your css:

/* you can modify this as you see fit */
@media screen and (max-width: 480px) {

  div#wrapper {
    max-width: 100%;
    overflow:hidden;
  }
  img {
    max-width: 100%;
  }

}

Note: This will only work if you set a width on your wrapping element, like we're doing there. max-width is also fine for that. If you don't the element probably will stretch out with the image.

This will ensure that big images never become bigger than the element that wraps it, but smaller images will not be modified.

How set correct width for mobile web page work on iphone

1 Answers