针对iPad的Safari媒体查询

2022-06-28 00:00:00 css responsive-design media-queries

@纯媒体屏幕和(最小宽度:768px)和(最大宽度:1199px){}

我只想为给定设备大小的Safari浏览器设置Media Query。

@媒体屏幕和(-webkit-min-Device-Pixel-Ratio:0)和(最小宽度:768px)和(最大宽度:1199px){ *i-block-Chrome,.allsearch-in选择{显示:无;} )

仍然无法工作...


解决方案

针对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  }
 }

谢谢

相关文章