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

【问题标题】：Css media query for safari (only) targeting iPad and lower针对 iPad 及更低版本的 safari（仅）的 CSS 媒体查询
【发布时间】：2017-08-21 16:07:23
【问题描述】：

还有其他几个帖子要求提供类似的解决方案，但我无法获得任何为我们工作的已发布答案。我们需要在 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 iphone ipad safari media-queries

【解决方案1】：

这里没有魔法，CSS 媒体查询功能还不是很强大，无法完成您想要的。任何最大宽度为 768 像素的设备都将遵循相同的 CSS 规则。

我认为你需要的是一个 hack：

@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 提供。

【讨论】：