ipad 的 Safari 媒体查询答案

【问题标题】：Safari media Query for ipadipad 的 Safari 媒体查询
【发布时间】：2017-08-11 15:50:12
【问题描述】：

@media only screen and (min-width: 768px) and (max-width:1199px) {}

我只想为给定设备大小的 Safari 浏览器放置媒体查询。

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 768px) and (max-width:1199px) { ::i-block-chrome,.allsearch-in 选择{显示：无；} }

还是不行……

【问题讨论】：

请通过链接。 stackoverflow.com/questions/16348489/…

标签： css responsive-design media-queries

【解决方案1】：

适用于 iPad 和 iPhone 的 CSS 媒体查询

iPad 纵向和横向

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { /* STYLES GO HERE */}

iPad 横屏

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES GO HERE */}

iPad 纵向

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

浏览器特定的黑客攻击

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez  { color: red  }
}

 /* iPhone / mobile webkit */
 @media screen and (max-device-width: 480px) {
  #veintiseis { color: red  }
 }

谢谢你

【讨论】：

但是，这也适用于 Chrome，我不希望它适用于 chrome。
我只想要 Safari 的媒体查询
对于浏览器特定的 css 和媒体查询 hacks，您可以遵循两个指南

【解决方案2】：

为 safari 浏览器添加类以通过 javascript 确定浏览器名称

var ua = navigator.userAgent.toLowerCase(); 
if (ua.indexOf('safari') != -1) { 
  if (ua.indexOf('chrome') == -1) {
    alert("2"); // Safari
    //add class to body tag
  }
}

然后在 css 中使用这个类。

【讨论】：