Question

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

此菜单在桌面/笔记本电脑上按预期工作..但它看起来并不像桌面上那样。

我认为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

BTW：很好的菜单。

CSS菜单不适用于手机或平板电脑

1 个答案: