在 iOS 9 Safari 上打开 Bootstrap 模式时屏幕放大

Question

当我在 iOS9 Safari 上打开 Bootstrap 3 模式时，屏幕会放大。它在 iPhone 上的 Chrome 应用程序上按预期工作。以下是显示问题的图片。

Safari 截图：

Chrome 屏幕截图（预期行为）：

Answer 1

我不知道为什么会这样。 bootstrap 网站上的模式示例运行良好。

无论如何，这就是我所做的。

我更改了视口元标记，以强制 Safari 不缩放。我也不想从用户那里拿走缩放，所以当用户关闭模态时我把它改回来了。

强制停止缩放：

$('#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';
})

Answer 2

我也遇到过这个问题，并找到了我认为的问题所在。

问题（至少对我而言）似乎是页面上的内容没有垂直填充页面，导致 iOS 9 Safari 在显示模态时放大。这可以解释为什么 Bootstrap 示例按预期工作 - 页面有很多内容（垂直）。

我猜它需要一些 CSS 魔法（高度：某处 100%？）。如果有人是 CSS 尤其是 Bootstrap 的高手，那么任何帮助将不胜感激，与此同时，我将继续尝试找到修复程序并 post 回到这里进行更新。

更新：我已经实施了 CSS 粘性页脚，这解决了问题 - 不完全是我想要的修复，但它仍然有效。作为参考，我使用了 Ryan Fait (http://ryanfait.com/sticky-footer/) 的粘性页脚实现，但我想任何粘性页脚都可以使用。

Answer 3

以下代码为我解决了这个问题（和其他一些人 -> 请参阅 GitHub link）：

body {
  padding-right: 0px !important
}

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

来源：https://github.com/jschr/bootstrap-modal/issues/64#issuecomment-55794181

Answer 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'
      );
  }

Answer 5

基于，但调整为监听所有模式 open/close，并存储原始内容。

我正在使用 webpack，但只需要 jQuery($) 和下面的 fixBootstrapModalZoomBug 方法。

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

function fixQuirks() {
  fixBootstrapModalZoomBug();   
}

function fixBootstrapModalZoomBug() {
  // Fix Bootstrap Modal zoom bug
  //    
  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);
    });
  }
}

Answer 6

根据 Bootstrap 的 Wall of Browser Bugs，这是 iOS 9 Safari 中的一个已知问题。

Safari (iOS 9+)
Sometimes excessive automatic zoom is applied after opening a modal, and > the user isn’t allowed to zoom out

WebKit bug #150715

WebKit 错误的标题是：

Excessive enforced zoom when body is short and overflow:hidden (new iOS 9 breakage)

根据标题当body短的部分，我尝试将body的最小高度设置为视口高度，这为我的网站工作，但可能不是通用解决方案：

body {
    min-height: 100vh;
}

Answer 7

如已接受答案的评论中所述，最好仅将修复应用于 .modal-open class。

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

在 iOS 9 Safari 上打开 Bootstrap 模式时屏幕放大

Screen zooms in when a Bootstrap modal is opened on iOS 9 Safari

javascript

css

mobile-safari

twitter-bootstrap-3

ios9