CSS条件媒体查询问题：iPad Pro竖屏错误显示单列不符合预期

嘿，我来帮你揪出这个问题的根源啦！

你遇到的核心问题是媒体查询的条件范围设置得太宽泛，导致iPad Pro竖屏被错误地触发了单列显示规则。

咱们先拆解下你原有的CSS逻辑：

@media only screen
  and (min-width: 375px)
  and (orientation: portrait)
{
  article {
    columns: 1;
  }
}

这条规则的意思是：所有宽度≥375px的竖屏设备，都强制显示单列。但iPad Pro竖屏的实际宽度远大于375px（比如12.9寸款竖屏宽度是1024px），所以它会命中这个查询，被迫变成单列——这就是不符合你预期的原因。而iPhone 12 mini竖屏宽度刚好是375px，所以手机端的表现是正常的。

给你两个实用的解决方案：

方案一：缩小媒体查询的目标范围（推荐） #

把min-width改成max-width，让单列规则只针对宽度较小的手机设备，比如：

/* 基础样式：默认两列 */
article {
  max-width: 99%;
  columns: 2;
}

/* 仅手机竖屏显示单列 */
@media only screen
  and (max-width: 767px)
  and (orientation: portrait)
{
  article {
    columns: 1;
  }
}

这里的767px是手机和平板的常见分界宽度，小于这个值的竖屏设备（基本都是手机）显示单列，而iPad这类宽度≥768px的平板竖屏，就会沿用默认的两列样式。

方案二：针对性覆盖iPad竖屏样式 #

如果你需要更精准的控制，可以单独给iPad竖屏设置规则，确保它显示两列：

article {
  max-width: 99%;
  columns: 2;
}

/* 手机竖屏：单列 */
@media only screen
  and (max-width: 767px)
  and (orientation: portrait)
{
  article {
    columns: 1;
  }
}

/* iPad竖屏：强制两列 */
@media only screen
  and (min-width: 768px)
  and (max-width: 1024px)
  and (orientation: portrait)
{
  article {
    columns: 2;
  }
}

这个方案更明确，专门针对iPad的竖屏宽度范围（768px-1024px）设置样式，避免和其他设备混淆。

备注：内容来源于stack exchange，提问作者Cecil Ward