通过 iOS 邮件查看 html 电子邮件时，@media 查询被忽略

Question

我正在处理一个非常奇怪的问题。我已经在 iphone6s 和 iphone6

上进行了测试

1) 电子邮件发送到 iphone

上配置的非 Gmail 帐户

2) html 邮件是从 iOS 邮件

查看的

3) 这就是它变得奇怪的地方，我会尽量描述得最好 a) 如果我通过单击电子邮件列表中的电子邮件直接查看来自客户端的电子邮件。媒体查询不受尊重。 b) 如果我查看消息，单击向下箭头查看上一条消息，然后单击向上箭头查看原始消息，媒体查询得到尊重。

4) 我已经尝试了 icloud 和 yahoo 帐户以及两个不同的 iphones（6 和 6s）

我已经把它归结为这个简单的例子。当然，所有简单的模拟器都可以按照您的预期工作，不会出现问题

<!DOCTYPE html>
<html lang="en">
<head>
    <title>this is a test</title>
    <meta charset="UTF-8">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            /* ----------- iPhone 5 and 5S ----------- */
            /* Portrait */
            @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
                #main-wrapper{
                    max-width: 320px;
                    margin: 2px auto;
                    background-color: red;
                }

            }
        </style>
</head>
<body>
<div id="main-wrapper" style=" background-color: #ffffff;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in ante velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas imperdiet erat metus, sed maximus tortor dignissim vel. Fusce luctus eget turpis a pretium. Nunc sagittis vulputate risus et porta. Cras eros nisl, placerat id ultricies sit amet, eleifend vel augue. Nullam dignissim sodales rhoncus. Morbi hendrerit aliquam tortor.

    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla tellus massa, accumsan ac ex a, congue lobortis ipsum. Sed vitae ultrices purus. Nam vulputate lacus vitae massa laoreet scelerisque. Duis in risus non elit sodales pharetra. Nunc ultrices nisl quis leo mollis, sed consectetur tortor placerat. Fusce ultricies eleifend nisi, in congue metus iaculis ut.
</div>
</body>
</html>

Answer 1

假设 默认 IOS 电子邮件 reader 你的意思是 iOS 邮件 ，应该支持媒体查询。两件事

您的视口标签中不应该需要 initial-scale 属性，您尝试过 <meta name="viewport" content="width=device-width"> 了吗？
根据您希望此 CSS 影响的具体环境，您可能也不需要这样一个已加载的 @media 标签。您是否尝试过 @media screen and (max-device-width: 568px)?

通过 iOS 邮件查看 html 电子邮件时，@media 查询被忽略

@media queries being ignored when viewing html emails via iOS Mail

html-email

media-queries