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

Question

还有其他几个帖子要求提供类似的解决方案，但我还没有能够获得任何已发布的答案，以便为我们工作。我们需要在iPhone和iPad上定位Safari

let example = Example()

Answer 1

这里没有魔力，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;
    }

  }
}

但即便如此，也无法确保此代码仅在移动设备上运行。请注意，上面的代码是SCSS，而不是CSS。我相信你的，也是。请试试看，让我知道。由Jeff Clayton提供。