travailler avec l'orientation de la fenêtre pour fixer problème de zooming ipad

Question

Je suis sûr que vous êtes familier avec un petit problème que l'iPad a lors de la rotation. Lorsqu'un utilisateur tourne l'iPad veut garder l'échelle initiale et se termine le zoom quand il rerenders.

Beaucoup de gens ont suggéré d'y remédier à cette

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

qui fonctionne très bien, sauf qu'il ne permet pas à l'utilisateur de zoomer et dézoomer du site plus. Je suis curieux de savoir s'il y a un moyen de détecter le changement d'orientation échange les informations de la fenêtre, puis réinitialiser.

Par exemple

de la charge ma fenêtre serait

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

alors théoriquement quelques js qui fait quelque chose comme ceci:

  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"));
  };

Cela ne fonctionne pas parce que plutôt que la permutation avant l'orientation viewports est faite elle le fait de manière asynchrone. Y at-il un moyen de détecter une sorte de « sur le point de tourner » ou à une interjection fonction avant l'écran étant nouveau rendu?

qui aiderait beaucoup.

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.