2

我在 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>

这是一个示例,基于教程中的一系列侧边菜单(单击左推或右推选项)。

4

0 回答 0