我在 iframe 内的移动网页中实现了一个简单的左拉式汉堡菜单。但是,它在 iPhone 上的行为很奇怪。我们将 Bootstrap 用于一般的页面布局和内容。
使用 WeInRe 我注意到了以下行为:在一个 320px 的 iframe 中width
,如果我添加left: 50px
到其中body
的页面,它body
会向左移动50px
就好了,但也开始显示370px
宽度,而不是320px
和以前一样。
问题更严重:因为正确的left
值是百分比,所以主体会获得更大的宽度,然后left
重新计算,使菜单大于视口。
这里到底发生了什么?这是某种已知的 Mobile Safari 错误吗?
不幸的是,这个问题还没有公开可用的代码......
这是相关代码:
.offcanvas {
left: 0;
position: relative;
}
.offcanvas.active {
left: 75%;
overflow: hidden;
}
.sidebar {
position: fixed;
background-color: #5c008a;
top: 0;
left: -75%;
width: 75%;
height: 100%;
}
.offcanvas.active .sidebar {
left: 0;
}
$('[data-toggle="offcanvas"]').click(function() {
$('.offcanvas').toggleClass('active');
});
<body class="offcanvas">
[...]
<div class="sidebar">[...]</div>
[...]
</body>