Javascript 在iOS 9 Safari上打开引导模式时，屏幕将放大

当我在iOS9Safari上打开Bootstrap3模式时，屏幕会放大。它在iPhone上的Chrome应用程序上的工作与预期一样。下面是显示问题的图片

Safari截图：

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

---

我不知道为什么会发生这种情况。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';
})

---

我也受到了这个问题的影响，并且找到了我认为是问题所在的地方

问题（至少对我来说）似乎是当页面上的内容没有垂直填充页面时，导致iOS 9 Safari在显示模式时放大。这就解释了为什么引导示例可以像预期的那样工作——页面有很多内容（垂直）

我猜它需要一些CSS魔法（高度：100%左右？）。如果有人是CSS的高手，尤其是Bootstrap，那么任何帮助都将不胜感激，在此期间，我将继续尝试找到修复方法，并在这里发布更新

---

更新：我已经实现了一个CSS粘性页脚，这已经解决了这个问题-不完全是我想要的修复，但它仍然在工作。作为参考，我使用了Ryan Fait（）的sticky footer实现，但我想任何sticky footer都可以使用。

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

---

来源：

这似乎是一个视口错误

在此讨论：

从该线程中为我工作的代码：

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

基于，但调整为侦听所有模式打开/关闭，并存储原始内容

我正在使用webpack，但只需要使用下面的带有

fixbootstrapmodallzoombug

方法的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);
    });
  }
}

根据Bootstrap的说法，这是iOS 9 Safari中的一个已知问题

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

WebKit错误的标题是：

正文短且溢出时过度强制缩放：隐藏（新iOS 9）

根据标题的“当主体较短时”部分，我尝试将主体的最小高度设置为视口高度，这对我的站点很有效，但可能不是一个通用的解决方案：

body {
    min-height: 100vh;
}

---

正如在已接受答案的评论中所指出的，最好只对.modal开放类应用修复

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

---

嗨，网络黑客，你觉得我的解决方案怎么样。你会推荐它吗？我认为如果选择器在class.modal上，而不是在id上，你的解决方案会更好，然后修复将适用于您的网页/站点上的任何模式。在我尝试此之前，我尝试了10种解决方案来修复此错误-没有任何效果，但此解决方案成功：）我只需验证这没有任何奇怪的效果。这对我有效，我以前有过如下代码，其中更新了元内容，但这在我的情况下不起作用。我将上面的两个css语句组合成一个css body.modal-open.FWIW:setting

body{padding right:0px！important；}

，无论模式是否可见，网站/应用程序中每个页面/视图上的

body

都将是

padding right:0px。这可能会对您的应用程序区域产生不利影响。如果将
填充向右
移动到
.model open{}
中，您将得到相同的结果，但将确保
主体
仅在模态打开时以这种方式生效。这是因为
.modal open
类附加到
主体
标记，而不是
主体
中的某个嵌套标记。另外，如果您愿意，可以通过将规则设置为
body.modal-open{…}
来实现特定性。除此之外，我在我们管理的网站上注意到的一个问题是，某些内容（有意）被强制置于外部视图，因此将body的宽度设置为100%将其固定，因为它通过继承窗口宽度来适应html宽度。缺少一个括号。应该是：if（/iPad | iPhone | iPod/.test（navigator.userAgent.toLowerCase（））谢谢。这对我来说很有用，但只有在我将iPad | iPhone改成小写if（/iPad | iPhone | ipod/.test（navigator.userAgent.toLowerCase（））之后
body.modal-open{
  padding-right: 0 !important;
  overflow-y: auto;
}