CSS or Javascript that can resize any HTML viewed on iphone
css, html, iphone
Solution
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/
Problem
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.