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;
        }            
    }

根据我的理解和一些研究，link, link，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;
        }            
    }

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

From what I understand and based on a bit of research, link, link, the device dimensions for the iPhone 6+,6S+, 7+ are 414px X 736px.

希望这个答案对你有用。

iPhone CSS 媒体查询

iPhone CSS media queries

css

html-email

ios