CSS 媒体查询 iPhone 最大宽度答案

【问题标题】：CSS media query iPhone max-widthCSS 媒体查询 iPhone 最大宽度
【发布时间】：2017-07-29 00:54:09
【问题描述】：

我想针对小屏幕（纵向和横向的智能手机）进行媒体查询。

例如，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">

【问题讨论】：

你能给我看看你的元视口标签吗？
@Alex 我在帖子中添加了元标记

标签： css iphone responsive-design media-queries

【解决方案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;}
}

【讨论】：

一个非常简单但有效的解决方案