Brought to you by
2BlueSolutions Creative Web Design

Monday, May 14, 2012

Proper Viewport Scaling on iPad and iPhone

So, this is a little silly and I'm a little embarrassed to say that I've spent far too much of my time on this issue.

I had a multi-page site that wasn't displaying correctly on my iPad.  One page would look great, but the next would have the top menu cut off on the right and everything would be slightly zoomed in.

I realized that it was a scaling issue, but for all the experimenting I did with the meta viewport tag, I couldn't get it to work.

Then I thought of something...some pages didn't have as much content as the others.  The longer pages were displaying great, it was the pages short on content that weren't.  So, I went ahead and set a min-height for each page of 1050px (I figured it had to be a little larger than the 1024px portrait height of an iOS device) and voila, it worked.

All the pages showed correctly.  Now, I fully admit that this is most likely a hack that isn't considered the "proper way", but I am absolutely open to suggestions for the proper method of handling this situation.