Question

The meta tag “viewport” lets me set up the initial scale for a website, but this can get weird if the user then flips the orientation of the device.

For example, if I set the scale to be 800×380 and the user opens the website in portrait mode, this scale is obviously wrong, and when the user rotates 90deg, the website ends up being more like 1650 wide.

How would I set a viewport such that if the device is landscape to begin with, it’s 800×380, and if it’s portrait to begin with, it’s 380×800?

Answer 1

To detect orientation change, attach an event listener to the window:

window.addEventListener('orientationchange', updateOrientation, false);

In the updateOrientation function you can detect which orientation the device is in and reset the viewport attributes accordingly:

function updateOrientation() {
  if (!(navigator.userAgent.match(/iPhone/i)) && !(navigator.userAgent.match(/iPod/i))) {
    return;
  }

  var viewport = document.querySelector("meta[name=viewport]");

  switch (window.orientation) {
    case 0: //portrait
      //set the viewport attributes to whatever you want!
      //For Ex : viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=1;');
      break;
    case 90: case -90: //landscape
      //set the viewport attributes to whatever you want!
      break;
    default:
      //set the viewport attributes to whatever you want!
      break;
  }
}