javascript - Sidenav 触发器不适用于 Safari/iOS PWA

Question

我在 iOS/Safari 上遇到 sidenav 触发器的问题。它只是不打开 sidenav 或以任何方式使用react。有人对 sidenavs 和 iOS/Safari 有类似的问题吗？另请注意:我有另一个侧边导航，它在桌面/Chrome、Android 模拟器上工作得很好，甚至在 iOS/Safari 上也能工作。唯一明显的区别是触发 sidenav 的图标不起作用，它位于应用程序顶部的顶部导航、导航包装器中，而在所有设备上工作的那个都附加到一个图标/按钮在页面下方。

我试过将触发器类直接放在图标上，并将图标包装在带有触发器类的 anchor 标记中。这两个版本都适用于桌面/Chrome 和 Android 模拟器，但没有一个版本适用于 iOS/Safari。

这是第一个不工作的 sidnav 触发器:

    <div class="nav-wrapper container">
      <a href="/">Food<span>Ninja</span></a>
      <span class="right grey-text text-darken-1">
        <a class ="sidenav-trigger" data-target="side-menu">
        <i class="material-icons">menu</i>
        </a>
      </span>
    </div>
  </nav>

侧导航内容:

  <!-- side nav -->
  <ul id="side-menu" class="sidenav side-menu">
    <li><a class="subheader">FOODNINJA</a></li>
    <li><a href="/" class="waves-effect">Home</a></li>
    <li><a href="/pages/about.html" class="waves-effect">About</a></li>
    <li><div class="divider"></div></li>
    <li><a href="/pages/contact.html" class="waves-effect">
      <i class="material-icons">mail_outline</i>Contact</a>
    </li>
  </ul>

正在工作的第二个 sidenav 触发器:

  <div class="center">
    <a class="btn-floating btn-small btn-large add-btn sidenav-trigger" data-target="side-form">
      <i class="material-icons">add</i>
    </a>
  </div>

和第二个sidenav内容内容:

  <!-- add recipe side nav -->
  <div id="side-form" class="sidenav side-form">
    <form class="add-recipe container section">
      <h6 >New Recipe</h6>
      <div class="divider"></div>
      <div class="input-field">
        <input placeholder="e.g. Ninja soup" id="title" type="text" class="validate">
        <label for="title">Recipe Title</label>
      </div>
      <div class="input-field">
        <input placeholder="e.g. Tofu, mushroom, garlic" id="ingredients" type="text" class="validate">
        <label for="ingredients">Ingredients</label>
      </div>
      <div class="input-field center">
        <button class="btn-small">Add</button>
      </div>
    </form>
  </div>

materialize sidnav的初始化脚本:

document.addEventListener('DOMContentLoaded', function() {
  // nav menu
  const menus = document.querySelectorAll('.side-menu');
  M.Sidenav.init(menus, {edge: 'right'});
  // add recipe form
  const forms = document.querySelectorAll('.side-form');
  M.Sidenav.init(forms, {edge: 'left'});
});

重申一下，这两个 sidenavs 都可以在 Android 模拟器/chrome 浏览器上运行。只有第一个 sidenav 类 .side-menu 在 Safari 中不起作用。

Answer 1

同样的问题，尝试在viewport的content中设置maximum-scale=1

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">