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

Question

还有其他几个帖子要求类似的解决方案，但我无法获得任何已发布的答案来为我们工作。我们需要针对 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;
  }
}

Answer 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 提供.