'zoomed in' options for mobile browser

Question

I have a legacy web application that was written long before there were even mobile browsers, never mind responsive design. As such, everything is static.

I can't modify all aspects of the site's pages. For example, I cannot change that the main container is set to 900px with auto margins. But through other server-side output classes, I can modify bits here and there. For example, one class builds a <div> element with other nested markup, and I can add inline styles and attributes to any of this markup. I can also modify the header include to a certain degree. So what I'm wondering about options:

• Right now, the whole page fits in the mobile viewport, making text tiny. Can I instead zoom in for mobile? I don't mind if you can't see all the content but at least fonts are at a readable size. Is there some CSS or a meta tag that I can use to zoom by default? (desktop browsers must remain the same as they have always been, though)

• If I have an iframe within a page that is, say, 320px wide, is there a way that will allow me to automagically focus of that iframe on page load so that it fills the width of my mobile viewport?

• plain JavaScript is an option (no external libraries like jQuery); if this can't be done with a tag or with styles, is there a JavaScript method I could employ?

I apologize for lack of sample code... I've certainly tried a few different things with CSS properties, but no matter what I'm always viewing the zoomed out full-page version.

Answer 1

To make sure your fonts are readable you could use a font-size per percentages instead of pixels if thats what you are using.

View this article about adaptive design for mobile if this helps :

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries