@page规则中不存在page-orientation属性，真正控制打印方向的是size属性的landscape或portrait关键字；其生效受组策略、命名冲突、分页行为及内容样式协同影响。

@page 规则里没有 page-orientation 这个属性 —— 它根本不存在，浏览器会直接忽略。真正控制打印方向的，只有 size 属性里的 landscape 或 portrait 关键字。

---

@page { size: landscape } 为什么有时不生效

• 某些企业环境（尤其是 Windows + Chrome 管理版）通过组策略禁用了 @page 的权限，此时无论怎么写都无效
• 多个 @page 规则命名冲突，比如同时定义了 @page :first 和匿名 @page，而内容没匹配到对应规则
• 页面中存在 page-break-inside: avoid 的容器，但其高度超过单页，强制分页后，@page 的 size 只作用于“页框”，不接管内容重排逻辑

---

size: landscape 不等于“内容自动横过来”

• @page { size: A4 landscape } 仅改变纸张物理方向，不旋转 DOM 元素
• 原本按纵向设计的容器（如 width: 100%、display: flex）在横向纸张下可能超出宽度被裁剪
• 表格列宽、文字换行、Flex 折行行为不会自动适配，需手动干预

建议配合 @media print 重设关键样式：

• 给外层容器加 max-width: 297mm（A4 横向宽度）或 width: fit-content
• 表格加 white-space: nowrap 防止列被挤断
• 避免使用 position: absolute + top/left 数值定位，因为坐标系仍基于纵向视口逻辑

---

如何让某一页单独横向，其余纵向

用命名 @page + 元素 page 属性联动：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

@page rotated {
  size: A4 landscape;
  margin: 1cm;
}
.print-landscape {
  page: rotated;
}

• .print-landscape 必须是块级元素（如 div、section），且不能被 page-break-inside: avoid 封装在无法分页的容器里
• 若该元素跨页，page: rotated 仅对它所在第一页生效，后续页仍按默认 @page 渲染
• 浏览器兼容性：Chrome ≥ 65、Firefox ≥ 19 支持；Safari 对命名 @page 支持极弱，慎用

最易被忽略的一点：横向打印不是“设个 size 就完事”，而是 @page + 内容样式 + 分页控制三者协同的结果。缺一环，内容就错位、截断或干脆不响应。

立即学习“前端免费学习笔记（深入）”；