在iOS 9 Safari上打开Bootstrap模式时，屏幕会放大
当我在iOS9 Safari上打开Bootstrap 3模式时，屏幕会放大。它在iPhone上的Chrome应用程序上按预期工作。 下面是显示问题的图片。
Safari截图：
Chrome屏幕截图（预期行为）：
下面的代码为我（和其他一些人 – >见GitHub链接）修复了这个问题：
body { padding-right: 0px !important } .modal-open { overflow-y: auto; } 来源： https ： //github.com/jschr/bootstrap-modal/issues/64#issuecomment-55794181
根据Bootstrap的浏览器漏洞之墙 ，这是iOS 9 Safari中的一个已知问题。
Safari（iOS 9+）
有时会在打开模式后应用过多的自动缩放，并且>用户不允许缩小WebKit错误＃150715
WebKit错误的标题是：
当身体短而溢出时，过度强制缩放：隐藏（新的iOS 9破损）
根据标题中身体短小的部分 ，我尝试将身体的最小高度设置为视口高度，这对于我的网站来说虽然可能不是一个通用的解决scheme：
body { min-height: 100vh; }
我不知道为什么会这样。 引导网站上的模式示例工作正常。
无论如何，这是我做的。
我更改了视口元标记，以强制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'; })
这似乎是一个视口错误。
这里讨论： 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' ); }
正如在接受的答案的评论中指出的那样，最好只将修复应用到.modal-open类。
body.modal-open{ padding-right: 0 !important; overflow-y: auto; }
基于Sandeep Singh's Answer ，但是调整为倾听所有模式的开启/closures，并存储原始内容。
我正在使用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); }); } }
我也遇到了这个问题，并追查了我认为是什么问题。
这个问题（至less对我来说）似乎是当页面上的内容没有垂直填充页面时，导致iOS 9 Safari在显示模式时放大。 这将解释为什么Bootstrap示例按预期工作 – 页面有很多内容（垂直）。
我猜测它需要一些CSS魔术（一个高度：100％的地方？）。 如果有谁是CSS的特别Bootstrap的高手，那么任何帮助将不胜感激，在此期间，我会继续尝试find一个修复和发布在这里更新。
更新：我已经实现了一个CSS粘页脚，这已经解决了这个问题 – 不完全是我想要的修复，但仍在工作。 作为参考，我使用了Ryan Fait（ http://ryanfait.com/sticky-footer/ ）的粘性页脚实现，但是我想任何粘性页脚都可以工作。
