работа с ориентацией окна, чтобы исправить проблему масштабирования ipad - PullRequest
Новая
       6

работа с ориентацией окна, чтобы исправить проблему масштабирования ipad

2 голосов
/ 10 января 2012

Так что я уверен, что вы знакомы с небольшой проблемой, возникающей у ipad при вращении. Когда пользователь вращается, ipad хочет сохранить начальный масштаб и в конечном итоге увеличивает при повторном рендеринге.

Многие люди предлагали исправить это с помощью 

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

, который прекрасно работает, за исключением того, что он больше не позволяет пользователю увеличивать и уменьшать масштаб сайта. Мне любопытно, если есть способ обнаружить изменение ориентации, поменять местами информацию в окне просмотра и затем сбросить.

Например

при загрузке мой видовой экран будет 

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

тогда теоретически есть некоторые js, которые делают что-то вроде этого: 

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

Это не работает, потому что вместо того, чтобы менять местами окна просмотра перед установкой ориентации, он делает это асинхронно. Есть ли способ обнаружить что-то вроде «собирается вращаться» или просто вставить функцию перед перерисовкой экрана?

это очень помогло бы.

Ответы [ 2 ]

1 голос
/ 01 марта 2013

попробуйте это работает для меня: 

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

Теперь, когда вы поворачиваете iPad, он определяет правильный масштаб.

1 голос
/ 10 января 2012

Пара ответов здесь, чтобы позволить пользователю увеличивать и уменьшать масштаб, добавьте user-scalable=1 к свойствам области просмотра и удалите maximum-scale=1.0 или измените его на более высокое значение.maximum-scale=1.0 означает, что пользователь не сможет масштабировать экран больше, чем его текущий уровень: 

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

Если вы хотите обнаружить изменение ориентации, присоедините прослушиватель событий к окну: 

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

В функции updateOrientation вы можете определить, в какой ориентации находится устройство, и соответственно сбросить атрибуты области просмотра: 

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;
  }
}
...