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

Question

我在iOS / Safari上使用sidenav触发器时遇到问题。它只是不会打开sidenav或以任何方式做出反应。有人在Sidenavs和iOS / Safari中有类似的问题吗？还要注意：我还有另一个侧面导航，它可以在台式机/ Chrome，Android仿真器上正常工作，甚至可以在iOS / Safari上工作。唯一可辨别的区别是，用于触发不起作用的sidenav的图标位于应用顶部的顶部导航，导航包装中，而在所有设备上都可以使用的导航附加在图标/按钮上在页面下方。

我已经尝试将触发器类都直接放在图标上，并将图标包装在带有触发器类的锚标记中。这两个版本均可在台式机/ Chrome和Android模拟器上运行，而NEITHER版本可在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>

sidenav内容：

  <!-- 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>

实现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'});
});

要重申，两个sidenav都可以在Android模拟器/ chrome浏览器上工作。仅第一个sidenav类.side-menu在Safari中不起作用。

Answer 1

同一问题，尝试在视口的内容中设置maximum-scale = 1

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