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

Question

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

Safari 截图：

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

Answer 1

以下代码为我（以及其他一些人 -> 查看 GitHub 链接）解决了这个问题：

body {
  padding-right: 0px !important
}

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

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

Answer 2

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

Safari（iOS 9+）
有时打开模态框后会应用过度的自动缩放，并且 > 不允许用户缩小

WebKit bug #150715

WebKit bug 的标题是：

body 短且溢出时过度强制缩放：隐藏（新 iOS 9 损坏）

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

body {
    min-height: 100vh;
}

Answer 3

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

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

我更改了视口元标记，以强制 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 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

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

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

Answer 6

基于Sandeep Singh's Answer，但调整为监听所有模态打开/关闭，并存储原始内容。

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

// fix-quirks.js - referenced from my main application's 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);
    });
  }
}

Answer 7

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

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

我猜它需要一些 CSS 魔法（高度：某处的 100%？）。如果有人是 CSS 专家，尤其是 Bootstrap，那么任何帮助都将不胜感激，与此同时，我将继续尝试找到修复并在此处发布更新。

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