working with window orientation to fix ipad zooming issue

Question

So I'm sure you're familiar with a little issue that ipad has when rotating. When a user rotates the ipad wants to keep the initial scale and ends up zooming in when it rerenders.

A lot of people have suggested remedying it with this

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

which works great except it doesn't allow the user to zoom in and out of the website anymore. I'm curious if there is a way to detect the orientation change swap the viewport information and then reset.

For example

on load my viewport would be

<meta name="viewport" id="view-port" content="width=device-width, initial-scale=1.0"/>

then theoretically have some js that does something like this:

  window.onorientationchange = function() {
    $("#view-port").attr("content", "width=device-width, maximum-scale = 1.0, initial-    scale= 1.0");
    setTimeout("resetMetaTag()", 500);
 };

  var resetMetaTag = function() {
    $("#view-port").attr("content", "width=device-width, initial-scale= 1.0");
    console.log($("#view-port").attr("content"));
  };

This doesn't work because rather than swapping viewports before the orientation is made it does it asynchronously. Is there a way to detect a sort of "about to rotate" or to just interject a function prior to the screen being rerendered?

that would help a lot.

Answer 1

Couple answers here, to allow the user to zoom in and out add user-scalable=1 to the viewport properties and remove maximum-scale=1.0, or change it to a higher value. maximum-scale=1.0 means exactly that, the user will not be able to scale the screen any greater than its current level:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1;" />

If you want 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!
      viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=1;');
      break;
    case 90: case -90: //landscape
      viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=1;');
      break;
    default:
      viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=1;');
      break;
  }
}

Answer 2

try this works for me:

<meta name="viewport" content="width=device-height, minimum-scale=1, user-scalable=1;">

now when you rotate ipad it detects the right scale.