这个问题在HTML邮件开发里特别常见，核心原因出在你当前媒体查询里的max-device-width属性——它对应的是设备的物理固有宽度，不会随着屏幕旋转而改变。比如一台竖屏宽度320px的手机，横屏时max-device-width依然是320px，所以即使视口宽度已经超过399px，你的媒体查询条件还是会满足，导致样式没有被正确重置。

下面是具体的修复方案：

1. 移除max-device-width，只保留max-width #

把你的媒体查询改成只基于视口宽度的判断，因为max-width会随着屏幕旋转实时更新：

@media screen and (max-width: 399px) {
  #body_table { padding: 0 10px; }
  .container { width: 100%; }
}

2. 针对横屏场景显式重置样式 #

有些邮件客户端（比如iOS Mail）在旋转后可能不会自动清除竖屏样式，建议额外添加横屏的媒体查询，显式还原默认样式：

@media screen and (min-width: 400px) {
  #body_table { padding: 0; /* 还原你原本的默认padding值 */ }
  .container { width: /* 你的横屏默认宽度，比如600px */; }
}

3. 优化viewport标签 #

虽然你已经加了viewport，但可以补充maximum-scale=1来避免用户缩放干扰，确保视口宽度准确：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

4. 触发邮件客户端重绘（可选） #

如果上面的方法还是没效果，可能是部分客户端旋转后没有触发重绘。可以在媒体查询里加一个微小的、不影响视觉的样式来强制重绘，比如：

@media screen and (max-width: 399px) {
  #body_table { 
    padding: 0 10px;
    transform: translateZ(0); /* 触发GPU重绘 */
  }
  .container { width: 100%; }
}

最后提醒一下：HTML邮件的兼容性差异很大，建议在主流客户端（iOS Mail、Gmail、Outlook、Android Mail）里都测试一遍，确保旋转逻辑正常。

内容的提问来源于stack exchange，提问作者Kevin