Question

使用CSS时，我可以使用css与Chrome正确对齐我的元素。在 chrome inspector中 - ＆gt; 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听起来不对。

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

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

的更新

2 个答案: