css - 媒体查询不适用于 ipad

Question

您好，我编写了媒体查询以在 ipad 中获得导航栏的响应式 View 。我的媒体查询不起作用。

 .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

device-width 和 device-height 都是已弃用的媒体功能，您应该使用 ma​​x(/min)-device-width 和ma​​x(/min)-device-height 代替。

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