在iOS 9 Safari上打开Bootstrap模式时,屏幕会放大
San*_*ngh 35 javascript css mobile-safari twitter-bootstrap-3 ios9
当我在iOS9 Safari上打开Bootstrap 3模式时,屏幕会放大.它在iPhone上的Chrome应用程序上正常运行.以下是显示问题的图片.
Safari截图:
Chrome屏幕截图(预期行为):
小智 29
以下代码为我(以及其他一些人 - >参见GitHub链接)解决了这个问题:
body {
padding-right: 0px !important
}
.modal-open {
overflow-y: auto;
}
资料来源:https://github.com/jschr/bootstrap-modal/issues/64#issuecomment-55794181
- FWIW:设置`body {padding-right:0px!important;}`,你的网站/应用程序中每个页面/视图上的`body`,无论模态是否可见都将是`padding-right:0px;` .这个_could_会对你的应用领域产生负面影响.如果将`padding-right`移动到`.model-open {}`,你将得到相同的结果,但确保只有当模态打开时,`body`才会以这种方式实现.这是因为`.modal-open`类附加到`body`标记,而不是`body`中的一些嵌套标记.另外,如果你愿意,可以通过将规则设置为`body.modal-open {...}`来获得特异性. (3认同)
根据Bootstrap的Wall of Browser Bugs,这是iOS 9 Safari中的一个已知问题.
Safari(iOS 9+)
打开模式后有时会进行过度自动缩放,并且>不允许用户缩小
WebKit错误的标题是:
当身体很短并且溢出时过度强制缩放:隐藏(新的iOS 9破损)
基于身体短小时标题的一部分,我尝试将身体的最小高度设置为视口高度,这对我的网站有效,但可能不是一般解决方案:
body {
min-height: 100vh;
}
我不知道为什么会这样.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';
})
它似乎是一个视口错误.
在此讨论: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'
);
}