Изменение масштаба (уменьшения) области просмотра работает только один раз

У меня проблема с масштабированием iPad.

При щелчке пользователь должен получить всплывающее окно с наложением, и представление не должно масштабироваться - это означает, что оно должно уменьшаться до масштаба 0,75 (в основном, уменьшать масштаб до максимально возможного). Поэтому я применяю этот код jQuery к окну просмотра:

$('meta[name="viewport"]').attr('content', 'width=1020, height=device-height, initial-scale=0.75, minimum-scale=0.75, maximum-scale=0.75, user-scalable=no');

И при закрытии я сбрасываю тоже исходные значения, чтобы включить масштабирование. Вроде такой:

$('meta[name="viewport"]').attr('content', 'width=1020');

Итак, чтобы переписать

  1. Пользователь заходит на страницу, имеет начальное содержимое окна просмотра ширина =1020
  2. Пользователь щелкает элемент, вызывающий всплывающее окно, пользователь может увеличить масштаб на странице
  3. Всплывающее событие изменяет содержимое области просмотра, поэтому оно уменьшается до 0,75 [кодовый блок #1]
  4. Когда всплывающее окно закрыто, содержимое области просмотра сбрасывается [кодовый блок #2]

Это работает нормально, пока пользователь не выполнит одно масштабное действие ПОСЛЕ первого изменения области просмотра и снова не вызовет всплывающее событие. Тогда примененные атрибуты области просмотра не вступят в силу, они останутся увеличенными вместо масштаба 0,75.

TLDR: масштабирование окна просмотра работает только один раз:)

Добавляется больше кода:

$('body').on('click', '#large-image', function() {
    $('meta[name="viewport"]').attr('content', 'width=1020, height=device-height, initial-scale=0.75, minimum-scale=0.75, maximum-scale=0.75, user-scalable=no');
    // HERE GOES CODE THAT CREATES A FIXED DIV WITH 100% IN BOTH HEIGHT AND WIDTH
});
$('body').on('click', '#zoomPinchClose', function() {
    // REMOVE THE FIXED DIV
    $('meta[name="viewport"]').attr('content', 'width=1020');
});

Вот и все. Нет укладки для тела. Создается только растянутый фиксированный div.

1 ответ

Хватаясь за соломинку здесь, но попробуйте это

$('body').on('click', '#zoomPinchClose', function() {
    // REMOVE THE FIXED DIV
    $('meta[name="viewport"]').removeAttr("content");
    $('meta[name="viewport"]').attr('content', 'width=1020');
});
Другие вопросы по тегам