Safari媒体查询ipad

Question

@media only screen and（min-width：768px）and（max-width：1199px）{}

我想仅针对给定尺寸的设备将Safari查询放入safari浏览器。

@media screen and（-webkit-min-device-pixel-ratio：0）和（min-width：768px）and（max-width：1199px）{ :: i-block-chrome，。allsearch-in select {display：none;} }

仍然没有工作......

Answer 1

适用于iPad的CSS媒体查询＆amp;的iPhone

iPad纵向和放大景观

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

iPad in landscape

@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  }
 }

THANKYOU

Answer 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中使用这个类。