Экран масштабируется, когда мода загрузки Bootstrap открывается на iOS 9 Safari

Ответ 1

Следующий код исправил проблему для меня (и некоторых других людей → см. ссылку GitHub):

body {
  padding-right: 0px !important
}

.modal-open {
  overflow-y: auto;
}

Источник: https://github.com/jschr/bootstrap-modal/issues/64#issuecomment-55794181

Ответ 2

В соответствии с Bootstrap Стена ошибок браузера это известная проблема в Safari iOS 9.

Safari (iOS 9+)
Иногда при открытии модального режима применяется чрезмерное автоматическое масштабирование, a > пользователю не разрешается уменьшать масштаб

Ошибка WebKit # 150715

Название ошибки WebKit:

Чрезмерное принудительное масштабирование при коротком замыкании тела и переполнении: скрытый (новый обрыв iOS 9)

Основываясь на части названия, когда тело короткое, я попытался установить минимальную высоту тела на высоту видового экрана, которая работала на моем сайте, но не может быть общим решением:

body {
    min-height: 100vh;
}

Ответ 3

Я понятия не имею, почему это происходит. Модальные примеры на веб-сайте bootstrap работают нормально.

Во всяком случае, вот что я сделал.

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

Чтобы принудительно остановить масштабирование:

$('#myModal').on('show.bs.modal', function (e) {
document.querySelector('meta[name="viewport"]').content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
})    

Чтобы изменить его на значение по умолчанию:

$('#myModal').on('hidden.bs.modal', function (e) {
document.querySelector('meta[name="viewport"]').content = 'viewport" content="width=device-width, initial-scale=1';
})

Ответ 4

Кажется, это ошибка в окне просмотра.

Обсуждение здесь: https://www.reddit.com/r/web_design/comments/3la04p/psa_safari_on_ios9_has_a_media_query_bug/

Код, который работал у меня из этого потока:

if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
    document.querySelector('meta[name=viewport]')
      .setAttribute(
        'content',
        'initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=no'
      );
  }

Ответ 5

Как отмечено в комментариях принятого ответа, лучше всего применить исправление только к классу .modal-open.

body.modal-open{
  padding-right: 0 !important;
  overflow-y: auto;
}

Ответ 6

На основе Sandeep Singh Answer, но настроен на прослушивание всех модальных открытий/закрытий и сохранение исходного содержимого.

Я использую webpack, но нужен только jQuery ($) с помощью метода fixBootstrapModalZoomBug ниже.

// fix-quirks.js - referenced from my main application file
var $ = require('jquery');
$(fixQuirks);

function fixQuirks() {
  fixBootstrapModalZoomBug();   
}

function fixBootstrapModalZoomBug() {
  // Fix Bootstrap Modal zoom bug
  //    https://stackoverflow.com/questions/32675849/screen-zooms-in-when-a-bootstrap-modal-is-opened-on-ios-9-safari
  if(/iPad|iPhone|iPod/.test(navigator.userAgent.toLowerCase())) {
    var m = $('meta[name=viewport]');
    var originalContent = m.attr('content');

    $('body').delegate('*','show.bs.modal',function(ev){
      m.attr('content', 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0');
    }).delegate('*','hidden.bs.modal',function(ev){
      m.attr('content', originalContent);
    });
  }
}

Ответ 7

Я также попал в эту проблему и обнаружил, что я считаю проблемой.

Проблема (по крайней мере для меня) кажется, когда контент на странице не вертикально заполняет страницу, заставляя iOS 9 Safari увеличивать масштаб при отображении модальности. Это объясняет, почему пример Bootstrap работает так, как ожидалось, - страница имеет много контента (по вертикали).

Я предполагаю, что ему нужна магия CSS (высота: 100% где-то?). Если кто-то является whiz с CSS, особенно Bootstrap, тогда любая помощь будет оценена, тем временем я продолжу поиск исправления и отправлю сообщение здесь с обновлением.

Обновление: я применил CSS Sticky Footer, и это решило проблему - не совсем то, что я хотел, но она работает, тем не менее. Для справки я использовал реализацию липкого нижнего колонтитула Ryan Fait (http://ryanfait.com/sticky-footer/), но я думаю, что любой липкий нижний колонтитул будет работать.