如何通过HTML的CSS @page的size属性设置打印页面的纸张尺寸方向-html教程-PHP中文网

@page size 必须在@media print中声明才生效，支持a4等标准尺寸及宽高对（需带单位），方向关键词须紧跟尺寸后；chrome/edge兼容性好，firefox对自定义尺寸加方向支持不稳定，safari基本只认a4/letter字符串。

如何通过html的css @page的size属性设置打印页面的纸张尺寸方向

用 `@page size` 设置纸张尺寸和方向时，必须写在打印媒体查询里

直接在普通样式表中写 @page { size: A4 landscape; } 是无效的——浏览器只在打印上下文（@media print）中解析 @page 规则。不套这层壳，CSS 引擎压根不认。

正确写法：

@media print {
  @page {
    size: A4 landscape;
  }
}

size 值支持标准纸张名（A4、letter、legal），也支持宽高对（210mm 297mm），单位必须明确，210 297 这种无单位写法会被忽略
方向关键词 portrait 和 landscape 必须紧跟在尺寸值后面，顺序不能颠倒；size: landscape A4 是非法语法，部分浏览器会静默失败

`size` 在不同浏览器中的兼容性差异很实际

Chrome 和 Edge（Chromium 内核）支持完整语法，包括自定义宽高 + 方向组合；Firefox 支持 A4 landscape 这类标准写法，但对 size: 210mm 297mm landscape 的解析不稳定，有时会回退为 portrait；Safari（macOS）对 @page 支持最弱，size 基本只认 A4/letter 字符串，加方向或自定义尺寸大概率被忽略。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

如果目标用户含 Safari 用户，建议只用 size: A4 或 size: letter，方向靠 @page { transform: rotate(90deg); } 模拟（不推荐，仅作降级备选）
不要依赖 size: auto——它不是重置值，而是让浏览器按默认设置走，无法保证跨设备一致

页面内容超出 `@page size` 设定区域时，打印结果不会自动缩放

@page size 只告诉打印机“这张纸多大”，不控制内容渲染比例。如果 HTML 内容宽度超过 A4 宽度（比如未设 max-width 的表格），Chrome 会强制缩小整个页面以适配纸张，而 Firefox 可能直接截断右侧——行为不统一。

务必配合 @media print 中的内容样式：给 body 加 width: 210mm; margin: 0 auto;，再用 box-sizing: border-box; 避免 padding 把内容撑出边界
避免使用 position: fixed 或 transform 的元素，它们常在打印时错位或消失
用 page-break-inside: avoid; 控制分页，比依赖 size 更可靠

打印预览里看不到 `@page size` 效果？先检查是否触发了打印上下文

DevTools 的“打印预览”模式（Ctrl+P → “更多设置” → 勾选“显示打印预览”）才能反映 @page 生效情况；普通渲染模式下，@page 完全不参与计算，也不报错。

调试时，打开打印对话框后别急着点打印，先看右下角显示的纸张名称是否变成你设的 A4 (Landscape) —— 这是唯一可信的生效信号
如果显示仍是“默认”或“Letter”，说明 @page 规则没被识别：检查是否漏了 @media print 包裹、是否有语法错误（比如多了一个逗号）、或者用了 Safari 且写了非标准值

真正卡住人的地方，往往不是 size 语法本身，而是浏览器对“打印上下文”的严格界定——它不像普通 CSS 那样宽容，少一层 @media print，整段规则就等于不存在。