iPhone CSS 媒体查询

Question

我目前正在开发HTML电子邮件，我已经为iPhone编写了一些媒体查询，如下所示：

/* ----------- iPhone 6+, 6S+, 7+ and 8+ --------- */
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px)
and (orientation : portrait)
{
.email-container {
min-width: 414px !important;
}
.email-header{
padding: 1.2em !important;
}            
}

当然，此媒体查询不会被触发。

相反，当我将以下样式添加到头部时，它会影响 HTML：

/* Nexus 5X, Nexus 6, Nexus 6P, Pixel, Pixel XL, Pixel 2, Pixel 2 XL*/
@media only screen 
and (min-device-width : 411px) 
and (max-device-width : 731px)        
and (orientation : portrait)
{
.email-container {
min-width: 411px !important;
}
.email-header{
padding: 1.2em !important;
}            
}

根据我的理解，并基于一些研究，链接，链接，iPhone 6+，6S +，7 +的设备尺寸为414px X 736px。

为什么会触发 411px X 731px 设备的媒体查询？

Answer 1

你的宽度和高度有点混合。尝试以下代码

@media only screen 
and (max-width : 414px) 
and (max-height : 736px)
{
.email-container {
min-width: 414px !important;
}
.email-header{
padding: 1.2em !important;
}            
}

该代码现在查找最大设备宽度和最大设备高度，方向为纵向。这就是你的研究提出的：

根据我的理解和基于一些研究，链接，链接， iPhone 6+，6S +，7+的设备尺寸为414px X 736px。

希望这个答案对你有用。