iPad仅在景观中查询野生动物园的媒体查询

Question

使用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中使用媒体查询进行景观模式？不影响任何其他浏览器？

update

我不是在寻找

的标准媒体查询

@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访问相同的网页/网页/WebApp，并且与Chrome或Opera相比，看到了不同的东西浏览器？：/ux-wise听起来不正确。

Answer 2

您应该先尝试一下，因为它涵盖了当前的野生动物园版本，并且仅是纯safari：

此仍然可以与Safari 10.1：

正常工作

 /* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
 @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
 color:#0000FF; 
 background-color:#CCCCCC; 
  }
}

这是我为Safari 10.1 ：

设计的一个

双介质查询在这里很重要，不要删除它。

 /* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm) { @media {
.safari_only { 
    color:#0000FF; 
    background-color:#CCCCCC; 
   }
}}

替代方法： /* Safari 11 */

@media not all and (min-resolution:.001dpcm) { 
@supports (-webkit-appearance:none) 
and (stroke-color:transparent) {
.safari_only { 
    color:#0000FF; 
    background-color:#CCCCCC; 
    }
}}

使用它们：

<div class="safari_only">This text will be Blue in Safari</div>

，您也可以使用JavaScript检测浏览器并附加特定的样式表，例如：

var isSafari = /Safari/.test(navigator.userAgent) && 
/Apple Computer/.test(navigator.vendor);
if (isSafari) { 
$('head').append('<link rel="stylesheet" type="text/css" 
href="path/to/safari.css">') 
};