Question

我希望通过媒体查询定位小屏幕（纵向和横向智能手机）。

例如，iPhone 6的分辨率为667 x 375，以逻辑像素为单位。

此媒体查询以（纵向模式）为目标：

@media only screen and (max-width : 667px) {...}

现在，如果我想要定位同一台设备，但是在横向模式下，我认为我可以这样做：

@media only screen and (max-width : 667px) and (orientation: landscape) {...}

但这不起作用。如果我将max-width发送到668px，它确实有效。

为什么第一个不起作用？

编辑：这是来自<head>的我的视口元标记：

<meta name="viewport" content="width=device-width">

Answer 1

可以100％使用所有iPhone。

    /*============================================================================== 
    iPhone 4 and 4S || 320 x 480 || Default, Portrait and Landscape
================================================================================ */
@media only screen and (min-width: 320px) 
and (max-width: 480px){
    .test-class{display: none !important; visibility: hidden !important;}
}

@media only screen and (min-width: 320px) 
and (max-width: 480px) and (orientation: portrait) {
    .test-class{display: none !important; visibility: hidden !important;}
}

@media only screen and (min-width: 320px) 
and (max-width: 480px) and (orientation: landscape) {
    .test-class{display: none !important; visibility: hidden !important;}
}

/*============================================================================== 
iPhone 5, 5S, 5C and 5SE || 320 x 568 || Default, Portrait and Landscape
================================================================================ */
@media only screen and (min-width: 320px) 
and (max-width: 568px){
    .test-class{display: none !important; visibility: hidden !important;}
}

@media only screen and (min-width: 320px) 
and (max-width: 568px) and (orientation: portrait) {
    .test-class{display: none !important; visibility: hidden !important;}
}

@media only screen and (min-width: 320px) 
and (max-width: 568px) and (orientation: landscape) {
    .test-class{display: none !important; visibility: hidden !important;}
}

/*============================================================================== 
iPhone 6, 6S, 7 and 8 || 375 x 667 || Default, Portrait and Landscape
================================================================================ */
@media only screen and (min-width: 375px) 
and (max-width: 667px){ 
    .test-class{display: none !important; visibility: hidden !important;}
}

@media only screen and (min-width: 375px) 
and (max-width: 667px) and (orientation: portrait) { 
    .test-class{display: none !important; visibility: hidden !important;}
}

@media only screen and (min-width: 375px) 
and (max-width: 667px) and (orientation: landscape) { 
    .test-class{display: none !important; visibility: hidden !important;}
}

/*============================================================================== 
iPhone 6+, 7+ and 8+ || 414 x 736 || Default, Portrait and Landscape
================================================================================ */
@media only screen and (min-width: 414px) 
and (max-width: 736px){ 
    .test-class{display: none !important; visibility: hidden !important;}
}

@media only screen and (min-width: 414px) 
and (max-width: 736px) and (orientation: portrait) { 
    .test-class{display: none !important; visibility: hidden !important;}

}

@media only screen and (min-width: 414px) 
and (max-width: 736px) and (orientation: landscape) { 
    .test-class{display: none !important; visibility: hidden !important;}
}

/*============================================================================== 
iPhone X || 375 x 812 || Default, Portrait and Landscape
================================================================================ */
@media only screen and (min-width: 375px) 
and (max-width: 812px){ 
    .test-class{display: none !important; visibility: hidden !important;}
}

@media only screen and (min-width: 375px) 
and (max-width: 812px) and (orientation: portrait) { 
    .test-class{display: none !important; visibility: hidden !important;}
}

@media only screen and (min-width: 375px) 
and (max-width: 812px) and (orientation: landscape) { 
    .test-class{display: none !important; visibility: hidden !important;}
}

CSS媒体查询iPhone最大宽度

1 个答案: