11

I'm making a web app mainly for iOS. I want it to work in landscape and portrait, as if it were a native app (so no zooming). I found when setting 

<meta name="viewport" content="width = device-width, height = device-height, maximum scale = 1.0, minimum-scale = 1.0">

Works for portrait; device-height is the full height on portrait and device-width is the full width in portrait. However, when the device is rotated to landscape, Safari still tries to enforce the original width (320) on the new landscape width (zooms up 320 to 480). I've tried dynamically resetting the viewport like

document.getElementById("viewport").setAttribute('content', 'width = ' + maxWidth + ', height = ' + maxHeight + ', maximum-scale = 1.0, minimum-scale = 1.0');

Where maxHeight and maxWidth are the new height/width proportions after re-orientation, but Safari gives a "undefined; TypeError: "null" is not an object" error.

I don't want to specify different style sheets for each condition (iphone screen, iphone retina screen, ipad, and possible ipad retina soon) as 1. I want to keep it generic 2. I'd like it to work natively on other browsers too 3. I'm lazy

So I hope I'm making sense... can anyone help me here? Essentially I want to change the viewport on runtime to match the landscape/portrait height. Thanks

Edit: Solution I was using getElementById, but viewport didn't have an ID by default. So I just added it in and it works now.

<meta name="viewport" id="viewport" content="width = device-width, height = device-height, maximum scale = 1.0, minimum-scale = 1.0">

However, it the first time the page renders (onload) it doesn't set it properly. So I added a setOrientation() at the bottom of the page so that it will set the orientation (the first time) after the page is fully loaded (it seemed to have some funky dimensions when setting the viewport to the window size onload).

The solution is reference for anyone later on who may be interested in this.

Thanks all!

Qantas 94 Heavy
  • 15,750
  • 31
  • 68
  • 83
Raekye
  • 5,081
  • 8
  • 49
  • 74
  • Try using the code in the accepted answer of question above to set the meta value. You can't use getElementById, because viewport doesn't have an ID :) – Christian Dec 12 '11 at 02:25
  • Thanks. I actually saw the other thread, but it wasn't working for me, so I posted another question. However, as you pointed out it doesn't have an ID; silly me. Tried setting the an ID to the meta though () and it worked. Thanks! – Raekye Dec 12 '11 at 03:00

0 Answers0