媒体查询不适用于ipad

Question

您好，我编写了媒体查询，以便在ipad中显示导航栏的响应视图。我的媒体查询无效。

 .nav-tabs>li>a {
    color: #2b2b2b;
    font-size: 13px;
    line-height: 26px;
    padding: 4px 12px;
    outline: none;
    margin-left: 50px;
    position: relative;
    display: block;
}
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
    .nav-tabs>li>a {
        color: #2b2b2b;
        font-size: 13px;
        line-height: 26px;
        padding: 4px 12px;
        outline: none;
        position: relative;
        display: block;
    }
}

有什么建议吗？

Answer 1

设备宽度和设备高度都是不推荐使用的媒体功能，您应该使用 max（/ min）-device-width 和最大（/ min） - 设备高度代替。

您可以在此处查看可用媒体功能列表：https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 2

CSS-tricks的

Chris Coyier为几乎所有设备写了一篇非常好的 - 略显过时的reference。下面的代码与I-pad有关，以及如何使用CSS专门定位它们。

＆＃13;

＆＃13;

/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
  /* -- style goes here -- */
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
 /* -- style goes here -- */
}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
 /* -- style goes here -- */
}

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
 /* -- style goes here -- */
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
 /* -- style goes here -- */
}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
 /* -- style goes here -- */
}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
 /* -- style goes here -- */
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
 /* -- style goes here -- */
}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
 /* -- style goes here -- */
}

＆＃13;

＆＃13;

＆＃13;