iPad 仅横向浏览器的媒体查询

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 device/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

你应该先试试这个，因为它涵盖了当前的 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; 
   }
}}

替代方法： /* 野生动物园 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">') 
};

Answer 2

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

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

使用此 Javascript，您可以检测设备是否为 Ipad，并在 body 上应用 class - 在中使用 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 访问相同的 webpage/webapp 并看到不同的东西与 Chrome 或 Opera 或其他浏览器相比？ :/ UX-wise 听起来不对。

iPad 仅横向浏览器的媒体查询

iPad only media queries for safari in landscape

html

css

safari

ipad

media-queries

更新