iOS webapp viewport that fits iphone but automatically scales on iPad

Question

I'm developing a web application that also has a mobile webapp. I currently use :

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

This works great for both iPhone and iPad.

My problem is that I'm using fixed size font (e.g. 18px), but on iPad I would like for it to look exactly as on the iPhone just much respectively bigger.

Is there a way for me to define the viewport in a way that will fit iPhone, and on iPad will look the same just in bigger scale? (like zooming in)?

p.s I also don't want to stop it from working on android, which it currently does :)

The mobile webapp could be viewed here: HocSpot Mobile, and the webapp here: HocSpot

Answer 1

Try it out

http://lessframework.com/

Answer 2

Why not just use CSS media queries? That will work in a UIWebView.

@media screen and (max-width:1024px) {
    // iPad rules
}

@media screen and (max-width:480px) {
    // iPhone rules
}

Then you can just style the font sizes with CSS.