针对iPad及更低版本的safari（仅限）的Css媒体查询

还有其他几个帖子要求类似的解决方案，但我还没有找到任何适合我们的答案。我们需要瞄准iPhone和iPad上的Safari

/* Safari 7.1+ */
@media only screen and (max-device-width: 768px),
only screen and (-webkit-min-device-pixel-ratio:0) {
  .hero-section {
    sa-search-nav ion-row {
    background: none;
  }

  .search-form {
    ion-col.select {
      margin-top: 0px;
      margin-left: 0px;
    }
  }
}

  form.search-form {
    min-height: 300px;
  }
}

---

这里没有魔法，CSS媒体查询功能还不太强大，无法实现您想要的功能。任何最大宽度为768px的设备都将遵守相同的CSS规则

我想你需要的是一个黑客：

@media only screen and (max-device-width: 768px),
only screen and (-webkit-min-device-pixel-ratio: 0) {

  // Safari 6.2,7.1+
  _::-webkit-full-page-media, _:future, :root {

    .hero-section {
      sa-search-nav ion-row {
        background: none;
      }

      .search-form {
        ion-col.select {
          margin-top: 0px;
          margin-left: 0px;
        }
      }
    }

    form.search-form {
      min-height: 300px;
    }

  }
}

然而，即使这样，也不能确保该代码只在移动设备上运行。请注意，上面的代码是SCS，而不是CSS。我相信你的也是。请试一试，让我知道。承蒙