CSS 菜单在手机或平板电脑上不起作用

Question

我创建了在这里找到的 plunkr：http://plnkr.co/edit/gqtFoQ4x2ONnn1BfRmI9?p=preview

此菜单在 desktop/laptop 上按预期工作。但它看起来不像在桌面上那样。

我认为 CSS 是正确的，但视口设置有问题？？

HTML:

<body ng-controller="MainCtrl" ng-style="{true: {overflow: 'hidden'}, false: {}}[toggleMenu]">

  <div class="header compact" role="banner">
    <div class="menu" ng-class="{true: 'active', false: ' '}[toggleMenu]" ng-style="{true: {width: menuWidth}, false: {}}[toggleMenu]">
      <h2 ng-click="toggleMenu = true">Menu</h2>
      <div class="nav" ng-style="{ 'width' : winWidth, 'height' : winHeight }">
        <ul role="navigation" class="nav-main">
          <li class="active">
            <a href="../makani/" data-ga-event="Header,Navigate,Home">Home</a>
          </li>
          <li>
            <a href="../makani/challenge/" data-ga-event="Header,Navigate,The Challenge">The
              Challenge</a>
          </li>
        </ul>
        <ul role="contentinfo" class="nav-aux">
          <li>
            <a href="../makani/faq/" data-ga-event="Footer,Navigate,FAQ">FAQ</a>
          </li>
          <li>
            <a href="../makani/about/" data-ga-event="Footer,Navigate,About Us">About Us</a>
          </li>
        </ul>
      </div>
      <button type="button" ng-click="toggleMenu = false">Close</button>
    </div>
  </div>
</body>

Answer 1

您没有在 css 中使用任何供应商前缀。即使 iOS 8 也要求它们在场。所以除了transform还有-webkit-transform.

见http://caniuse.com/#search=transform

顺便说一句：菜单不错。

CSS 菜单在手机或平板电脑上不起作用

CSS Menu Not Working on Mobiles or Tablets

html

css

viewport

angularjs