0

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

Guy
  • 5,370
  • 6
  • 25
  • 30
  • 1
    Why don't do like you do, but measuring (or guessing by user agent) the viewport's size and scaling the font-size style with the factor like: 18*currentViewPortHeight/320 ? – Kai Huppmann Apr 24 '12 at 14:49
  • It is possible. but it is not an elegant solution. Many iPhone apps that run on iPad as well have a x2 / x1 options, that easily just enlarges the iphone app. this is exactly what i want for my webapp – Guy Apr 24 '12 at 14:52
  • You talk about the option to run *native* iPhone apps full screen on iPads, don't you. That might be elegant from a programmers perspective, cause there's nothing to do, but it looks dirty for the user. Best way to me seems to make you own user interface for tablets and smart phones. – Kai Huppmann Apr 24 '12 at 14:58
  • 1
    I completely agree with you @Kai. What I'm trying to do here is find a temporary solution for until we create the iPad's interface. I prefer for the temporary solution to be this one :) – Guy Apr 24 '12 at 15:01

2 Answers2

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.

Jezen Thomas
  • 13,619
  • 6
  • 53
  • 91
1

Try it out

http://lessframework.com/

Monkviper
  • 1,477
  • 2
  • 11
  • 15