仅 iPad 的横向 Safari 媒体查询

Posted 2023-03-06

【中文标题】仅 iPad 的横向 Safari 媒体查询

【英文标题】：iPad only media queries for safari in landscape

【发布时间】：2018-05-19 06:14:12

【问题描述】：

使用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 设备/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 */

【问题讨论】：

那么，您希望媒体查询能够 a) 在 ipad 上以横向模式工作，或者 b) 在 ipad、横向模式且仅在 safari 上工作？

@scooterlord 我需要在 ipad、横向模式和仅在 safari 上的媒体查询。

iPad 我需要不同的媒体查询，具体取决于它的generation。我的建议转到此 URL：http://cssmediaqueries.com/ 在您的 iPad 中，您将获得绿色的 @media。希望对您有所帮助。

【参考方案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; 
   

替代方法： /* 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">') 
;

【讨论】：

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

您是否尝试过检查操作系统和浏览器并附加一个特定于 Safari 的样式表（如果为真）？ [链接] (***.com/questions/11219582/…)

是的，我在获取 safari 特定的 css 方面没有问题，问题是，它们只适用于纵向。我想要一些用于 Safari 的东西，在 iOS 中，风景。该问题涵盖了有关使用代理查找浏览器的内容。谢谢你试图帮助我。非常感谢它，但它可能是..

【参考方案2】：

您所寻找的内容无法仅通过媒体查询来实现，您必须使用 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 或不同的不同的东西浏览器？ :/ UX-wise 听起来不对。

【讨论】：

这应该可行，我会试一试。我不明白的是为什么我会被否决

可能是因为你的问题一开始就不够清楚..

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