CSS or Javascript that can resize any HTML viewed on iphone

I suppose that you can't use max-width on the html- or body-element. It works with:

@media screen and (max-width: 480px){
    #wrap {
    max-width: 320px;
    }
}

(further changes in #logo needed)

A grid system would offer a lot of flexability. Most scale images and text (if necassary), and transform into smooth, mobile layouts.

I prefer the 1140 CSS Grid http://cssgrid.net/

There is also:

• http://semantic.gs/
• http://fluidable.com/
• http://960.gs/

Be careful with:

<meta name="viewport" ...

There seems to be a bug on iOS devices.

Also, have a look at Twitter Responsive Bootstrap for developing responsive websites, and responsive.is for testing.

You could link different stylesheets to different media's like so:

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css"> 
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">

This way you can create different CSS rules for all kinds of screen sizes etc. This gives you a huge amount of flexibility.

Source