Question

I have a web page that comes up on an ipad. I added this meta for the viewport:

<meta name="viewport" content="width=980,maximum-scale=1.0" />

It works just fine in portrait, then when the ipad goes into landscape mode it works just fine as well. The problem is when I go back to portrait from landscape the page is over stretched, meaning portions of the page go off the screen in portrait mode. I have to double tap the screen to get it back to the normal view.

I then tried:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

But in portrait mode its not wide enough and the icons/text wraps to 2 lines when it should only be one line. It gets all bunched up. Any suggestions?

Answer 1

Have you tried something like this:

<meta name="viewport" content="initial-scale = 1,user-scalable=no,maximum-scale=1.0">