html - 仅限 iPad 的横向 safari 媒体查询

Question

当使用 CSS 时，我可以使用 css 将我的元素与 Chrome 正确对齐。在 chrome inspector-> ipad view 中，一切看起来都应该是这样。但是当我在实际的 iPad 上测试它时，一些 CSS 没有应用。我发现 ipad 特定的 CSS 媒体查询如下，

** /* Safari 7.1+ */ **
_::-webkit-full-page-media, _:future, :root .my-class {
    padding-right: 0;
}


**/* Safari 10.1+ */**
@media not all and (min-resolution:.001dpcm) { @media
  {
   .my-class {
    padding-bottom: 0;
  }
  }}


  **/* Safari 6.1-10.0*/**
@media screen and (min-color-index:0) 
and(-webkit-min-device-pixel-ratio:0) { @media
{
    .my_class {
    padding-bottom: 0;
  } 
}}

问题是，虽然他们在纵向模式下工作正常，但我没有指定的方法将 CSS 应用到横向模式。如何在 iOS 上的真实 iPad 设备/Safari 中使用横向模式的媒体查询？不影响任何其他浏览器？

更新

我不是在寻找标准的媒体查询，例如，

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* STYLES */ }

横向模式

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES */}

Answer 1

你要找的东西不能单独使用媒体查询来实现，你必须使用 Javascript 来查找 Ipad Safari 用户代理:

function isiPad() {
  return (
    (navigator.userAgent.toLowerCase().indexOf(/iPad/i) > -1)
  );
}

使用此 Javascript，您可以检测设备是否为 Ipad，并在 body 上应用一个类 - 在以下示例中使用 Jquery:

if (isIpad) {
  $('body').addClass('isIpad');
}

然后，按照上面的建议编写媒体查询:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
   .isiPad .myclass {
    /*styles*/
  }
}

虽然我明白为什么需要 iPad 差异化，但我无法理解为什么需要 Safari 差异化 - 因此，用户会使用 Safari 访问相同的网页/网络应用程序，并看到与 Chrome 或 Opera 或其他不同的东西浏览器？ :/UX-wise 听起来不对。