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

Question

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

Safari截图：

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

Answer 1

以下代码为我（以及其他一些人 - ＆gt;参见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错误的标题是：

  

当身体短暂且溢出时过度强制缩放：隐藏（新的iOS 9破损）

基于标题当身体很短时的部分，我尝试将身体的最小高度设置为视口高度，这对我的网站起作用虽然可能不是一般解决方案：

body {
    min-height: 100vh;
}

Answer 3

它似乎是一个视口错误。

在此讨论：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 4

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

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

Answer 5

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

我正在使用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
  //    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);
    });
  }
}