Как сохранить фиксированную ширину для окна просмотра макета в Android, iPhone, с масштабируемым пользователем = да;используя jQuery Mobile - PullRequest
Новая
       6

Как сохранить фиксированную ширину для окна просмотра макета в Android, iPhone, с масштабируемым пользователем = да;используя jQuery Mobile

1 голос
/ 09 марта 2012

Сайт должен иметь флюид-макет, подстраивающийся под ширину устройства, как в книжной, так и в альбомной ориентации.Вот мой мета-тег viewport: 

<meta name="viewport" id="viewportid" content="width=device-width, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">

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

Как я могу предотвратить поток содержимого при масштабировании?

Большое спасибо за любую помощь.Это было ужасно.

Вот пример уменьшенной страницы (масштаб = 1) (SDK эмулятора Android 2.1) Zoomed Out Image

Вот пример той же страницы, увеличенной (эмулятор Android 2.1)SDK) Zoomed In Image

1 Ответ

0 голосов
/ 17 марта 2012

Я попытался поиграться с photoswipe и iScroll4, но я хочу, чтобы пользователь уменьшал изображение, и iScroll4, похоже, не работает с Android Ver <= 1.6, согласно тестированию, которое я проводил на Android Emulator SDK. Я думал, что смогу попробовать что-нибудь лучше подходящее для моих нужд. </p>

Итак, AFAIK, и я могу ошибаться, нет способа отследить уровень масштабирования, согласно мета-тегу viewport, на устройствах Android. jQuery Mobile не имеет такой функции; возможно Sencha, PhoneGap или некоторые Android-библиотеки Java способствуют этому, и я был бы более чем рад исправить это!

Так вот, это не самый лучший метод, но я нашел способ, который кажется точным в пределах 1 или 2 пикселей, в худшем случае. Я не был уверен, изменяет ли Android уровень масштабирования при событии изменения ориентации, но я попробовал метод, и он сработал.

Вот код: 

$(document).ready(function(){
  var ViewportWidth = document.documentElement.clientWidth;
  var LayoutWidth = document.documentElement.clientWidth;

  $("#Index").css("width", LayoutWidth);

  var SetLayoutWidth = function() {
    LayoutWidth = Math.round((1/(ViewportWidth/LayoutWidth)) * document.documentElement.clientWidth);
    $("#Index").css("width", LayoutWidth);
  }

  $(window).resize(function() {
    ViewportWidth = document.documentElement.clientWidth;
  });

  $(window).bind("orientationchange", function(event) {
    if (navigator.userAgent.match(/android/i))
      if (Math.abs(window.orientation) == 90 && event.orientation == "landscape")
        SetLayoutWidth();
      else if (!window.orientation && event.orientation == "portrait")
        SetLayoutWidth();
  });
});

Когда пользователь увеличивает масштаб, изменяется ширина визуального окна просмотра, значение которого сохраняется. Отношение визуального видового экрана к ширине видового экрана макета составляет, скажем, 0,8 после увеличения пользователем. Теперь, когда пользователь меняет ориентацию устройства, соотношение делится на 1. Чтобы понять, какой должна быть ширина видового экрана макета на полном экране, в этом примере мне нужно взять 125% ширины визуального видового экрана.

Единственная известная мне проблема, которая может возникнуть, это то, что событие изменения размера может сработать до события изменения ориентации. Я не видел, чтобы это происходило в тестировании, но мне нужно будет определить, как решить эту проблему, если и когда это произойдет.

Спасибо.

...