iPad横屏模式下仅适用于Safari的媒体查询

Question

当使用CSS时，我可以使用Chrome正确地对齐我的元素。在Chrome检查器 - > 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。如何在真实的iPad设备/ iOS 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 */}

- Vishwa

---

所以，您想要媒体查询在iPad上仅在横向模式下工作，或者在iPad上，在横向模式下并且仅在Safari上工作？ - scooterlord

@scooterlord 我需要针对 iPad 横屏模式和仅限 Safari 的媒体查询。 - Vishwa

iPad可能需要不同的媒体查询，具体取决于其型号。我的建议是在iPad上访问此网址：http://cssmediaqueries.com/，您将看到它的@media以绿色显示。希望能有所帮助。 - T04435

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访问同一网页/ Web应用程序时，会与Chrome、Opera或其他不同浏览器看到不同的东西？：/从用户体验角度来看，听起来不太合适。

- scooterlord

---

这应该可以运行，我会试一试。我不明白的是为什么我会被踩。 - Vishwa

可能是因为你的问题一开始没有表达清楚。 - scooterlord

还不够清楚吗？我添加了更多细节并简化了完整性 :( - Vishwa

Answer 2

你应该首先尝试这个，因为它覆盖了当前的Safari版本，而且只适用于纯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检测浏览器，如果是Safari，则附加特定的样式表：

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">') 
};

- Vishnu

---

这是我的问题的一部分。我已经尝试过那些方法了。但问题是，我需要在真实的iPad设备/Safari上找到横向模式的媒体查询？而不影响任何其他浏览器。 - Vishwa

你尝试过检查操作系统和浏览器，并在其为Safari时附加一个特定的样式表吗？[链接] （https://dev59.com/O2gu5IYBdhLWcg3wloAO） - Vishnu

是的，我没有问题获取Safari特定的CSS，问题是它们只在纵向模式下工作。我想要一些适用于Safari在iOS横向模式下的东西。那个问题涉及到使用代理查找浏览器的内容。感谢您尝试帮助我，不管怎样都非常感激。 - Vishwa