iPad只有媒体查询景观野生动物园

Question

使用时CSS,我可以使用css正确对齐我的元素Chrome.在chrome inspector-> ipad视图中,所有看起来都应该如此.但是当我在实际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听起来不对.