Question

我在移动网页中实现了一个简单的左拉汉堡菜单，该网页位于iframe中。但是，它在iPhone上表现得很奇怪。我们使用Bootstrap进行常规页面布局和填充。

使用WeInRe我注意到以下行为：在固定width的320px的iframe中，如果我将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>

这里是sample，基于a tutorial的一系列侧边菜单（点击向左或向右推选项）。

iOS上的左侧定位项在iframe上变大

0 个答案: