javascript 在 iOS 9 Safari 上打开 Bootstrap 模式时屏幕会放大
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32675849/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Screen zooms in when a Bootstrap modal is opened on iOS 9 Safari
提问by Sandeep Singh
When I open a Bootstrap 3 modal on iOS9 Safari, the screen zooms in. It is working as expected on the Chrome app on iPhone. Below are the pictures which show the issue.
当我在 iOS9 Safari 上打开 Bootstrap 3 模式时，屏幕会放大。它在 iPhone 上的 Chrome 应用程序上按预期工作。下面是显示问题的图片。
Safari screenshot:
Safari 截图：
Chrome screenshot(expected behavior):
Chrome 屏幕截图（预期行为）：
采纳答案by KingDome24
The following code fixed the issue for me (and some other people -> see GitHub link):
以下代码为我解决了这个问题（和其他一些人 -> 见 GitHub 链接）：
body {
padding-right: 0px !important
}
.modal-open {
overflow-y: auto;
}
Source: https://github.com/jschr/bootstrap-modal/issues/64#issuecomment-55794181
来源：https: //github.com/jschr/bootstrap-modal/issues/64#issuecomment-55794181
回答by Doug Richardson
According to Bootstrap's Wall of Browser Bugs, this is a known issue in iOS 9 Safari.
根据 Bootstrap 的浏览器错误墙，这是 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
Safari (iOS 9+)
有时在打开模态后会应用过度的自动缩放，并且 > 不允许用户缩小
The title of the WebKit bug is:
WebKit 错误的标题是：
Excessive enforced zoom when body is short and overflow:hidden (new iOS 9 breakage)
身体短且溢出时过度强制缩放：隐藏（新的 iOS 9 破损）
Based on the part of the title when body is short, I tried setting the body's minimum height to the viewport height, which worked for my site though may not be a general solution:
根据body is short 时的标题部分，我尝试将 body 的最小高度设置为视口高度，这对我的网站有效，但可能不是通用解决方案：
body {
min-height: 100vh;
}
回答by Sandeep Singh
I have no idea why this is happening. Modal examples on the bootstrap website are working fine.
我不知道为什么会这样。bootstrap 网站上的模态示例工作正常。
Anyhow, here is what I did.
无论如何，这就是我所做的。
I changed the viewport meta tag, to forces safari to not zoom. I also did not want to take away zoom from user, so I changed it back when user dismiss the modal.
我更改了视口元标记，以强制 safari 不缩放。我也不想从用户那里拿走缩放，所以当用户关闭模式时我把它改回来了。
To force stop the zoom:
强制停止缩放：
$('#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';
})
To change it back to default:
要将其更改回默认值：
$('#myModal').on('hidden.bs.modal', function (e) {
document.querySelector('meta[name="viewport"]').content = 'viewport" content="width=device-width, initial-scale=1';
})
回答by LOLapalooza
It appears to be a viewport bug.
它似乎是一个视口错误。
Discussion here: https://www.reddit.com/r/web_design/comments/3la04p/psa_safari_on_ios9_has_a_media_query_bug/
此处讨论：https: //www.reddit.com/r/web_design/comments/3la04p/psa_safari_on_ios9_has_a_media_query_bug/
Code that worked for me from that thread:
该线程中对我有用的代码：
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'
);
}
回答by Justin
As noted in the comments of the accepted answer, it is best to apply the fix to only the .modal-open class.
如已接受答案的评论中所述，最好仅将修复程序应用于 .modal-open 类。
body.modal-open{
padding-right: 0 !important;
overflow-y: auto;
}
回答by Tracker1
Based on Sandeep Singh's Answer, but adjusted to listen for all modal open/close, and to store the original content.
基于Sandeep Singh 的 Answer，但调整为侦听所有模态打开/关闭，并存储原始内容。
I'm using webpack, but only jQuery($) with the fixBootstrapModalZoomBugmethod below are needed.
我正在使用 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);
});
}
}
回答by Alan Savage
I've also been hit by this problem and have tracked down what I believe to be the problem.
我也遇到了这个问题，并找到了我认为是问题的原因。
The issue (at least for me) seems to be when the content on the page doesn't vertically fill the page, causing iOS 9 Safari to zoom in when the modal is displayed. This would explain why the Bootstrap example works as expected - the page has a lot of content (vertically).
问题（至少对我而言）似乎是当页面上的内容没有垂直填充页面时，导致 iOS 9 Safari 在显示模式时放大。这将解释为什么 Bootstrap 示例按预期工作 - 页面有很多内容（垂直）。
I'm guessing that it needs some CSS magic (a height: 100% somewhere?). If anyone is a whizz with CSS especially Bootstrap then any help would be appreciated, in the meantime I'll carry on trying to find a fix & post back here with an update.
我猜它需要一些 CSS 魔法（高度：某处 100%？）。如果有人是 CSS 的高手，尤其是 Bootstrap，那么任何帮助将不胜感激，与此同时，我将继续尝试找到修复程序并在此处发布更新。
Update: I have implemented a CSS Sticky Footer and this has addressed the problem - not exactly the fix I wanted but it is working nonetheless. For reference I used the sticky footer implementation by Ryan Fait (http://ryanfait.com/sticky-footer/) but I guess any sticky footer would work.
更新：我已经实现了一个 CSS Sticky Footer，这已经解决了这个问题 - 不完全是我想要的修复，但它仍然有效。作为参考，我使用了 Ryan Fait ( http://ryanfait.com/sticky-footer/)的粘性页脚实现，但我想任何粘性页脚都可以使用。
