媒体查询 CSS 电子邮件

Question

这是我的问题。

我正在用表格编写时事通讯。工作正常。我正在使用媒体查询来设置移动样式。在我的电脑上，当我缩小浏览器大小时，它工作得很好。当我的浏览器缩放到 480px 宽度时，内容会更改为媒体查询 css。

当我在手机（iPhone 5c）上的浏览器上打开邮件时，内容不会更改为媒体查询的 CSS！我测试了它，当我将媒体查询最大宽度设置为 1000px 时，它确实发生了变化。但桌面版就不再好了……

@media only screen and (max-width: 480px) { 

.nieuwsbrief {
    width: 80%;
    min-width: 0px;
}
}

这是邮件，因此您可以自行调整：

我认为问题在于现代手机具有高分辨率。所以我使用了 max-device-width 而不是 max-width，但这也不起作用。

希望大家帮忙！！

（抱歉英语不好，我是荷兰人）。

Answer 1

我自己修好了：

我将最大宽度更改为最大设备宽度。它对移动设备有用，但当你缩小浏览器时就不行了。但我可以忍受这一点。

感谢您的帮助！！

Answer 2

iPhone 5 的纵向屏幕宽度为 640px。

通常手机媒体查询的最大宽度为 767px。

这里是您在不同设备的媒体查询中应该使用哪些测量的小摘要，来自 Bootstrap

超小型设备

电话 (<768px)

小型设备

平板电脑（≥768px）

中型设备

桌面（≥992px）

大型设备

桌面（≥1200px）