Question

我已经在css下面获取了iphone 5s的菜单。它适用于Windows中的Chrome浏览器，但是当我在iphone 5s的safari浏览器中检查它时，它不起作用。

＆＃13;

    /* Code for mobile menu */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: rgba(56, 72, 142, 0.5);
  transition: all 1s ease;
}
.mobile-menu ul {
  padding: 0;
  margin: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.mobile-menu ul li {
  padding: 11px 10px 10px 15px;
}
.mobile-menu ul li a {
  color: #000;
  font-size: 20px;
}
.mobile-menu ul li i {
  margin-right: 10px;
  font-size: 20px;
}

@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
  .mobile-menu ul {
    top: 75px !important;
    transform: translateY(0) !important;
    margin: auto;
    height: 100%;
  }
}
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
  .mobile-menu ul {
    top: 0 !important;
    transform: translateY(0) !important;
    margin: auto;
    height: 100%;
  }
}

＆＃13;

<div class="mobile-menu">
  <ul>
    <li class="homemenu-blue-bkg"><a href="#"><i class="icon-home"></i>Home</a></li>
    <li class="srt-bkg active"><a href="#"><i class="icon-srt"></i>Share Registry & Transfer</a></li>
    <li class="payroll-bkg active"><a href="#"><i class="icon-pp"></i>Payroll Processing</a></li>
    <li class="trust-bkg active"><a href="#"><i class="icon-ta"></i>Trust Administration</a></li>
    <li class="rms-bkg active"><a href="#"><i class="icon-rms"></i>Record Management Services</a></li>
    <li class="dsc-bkg active"><a href="#"><i class="icon-dsc"></i>Digital Signature Certification</a></li>
    <li class="cfdm-bkg active"><a href="#"><i class="icon-cfdm"></i>Corporate F D Management</a></li>
    <li class="career-bkg"><a href="#"><i class="icon-career"></i>Join TSRDarashaw</a></li>
  </ul>
</div>

＆＃13;

对于所有手机，它也应垂直居中。

Iphone媒体查询没有在safari上工作

0 个答案: