2

iframe 内にあるモバイル Web ページにシンプルな左プル バーガー メニューを実装しました。ただし、iPhone での動作はおかしくなります。一般的なページ レイアウトなどには Bootstrap を使用しています。

WeInRe を使用して、次の動作に気付きました: 320px の iframe で fixedwidthに、たとえば、left: 50pxそのbody中のページの に追加すると、これは問題なく左にbody移動しますが、代わりに幅で表示され始めます従来通り。 さらに悪いことに、正しい値はパーセンテージであるため、ボディの幅が大きくなり、その後、再計算されて、メニューがビューポートよりも大きくなります。50px370px320px
leftleft

ここで一体何が起こっているのですか？これは 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