CSS or Javascript that can resize any HTML viewed on iphone

Question

I'm trying to come up with some CSS or Javascript that can autoresize any HTML that is being viewed in iPhone browser (UIWebview component) such that the content fits the viewport and the images/text all resize. (not the same as achieving a zoom out).

The main idea I got from another question is to adjust the width of elments, something like:

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

I also have the usual viewport meta tag:

<meta name="viewport" content ="width=device-width">

This doesn't resize it perfectly as it looks like this currently. Here is the original HTML.

I was wondering what else I can do to achieve this goal? I don't want to get this right for just this HTML but other HTML pages too.

Maybe a jQuery plugin already exists for this?

I don't want to get this right just for this page, I want something more generic for any HTML page.

Answer 1

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