页面尺寸由<meta name="viewport">和CSS共同控制，前者影响整体缩放逻辑，后者通过max-width、box-sizing等属性精确约束编辑区域；导出PDF需依赖@media print和@page规则，第三方库尺寸配置需结合初始化选项与容器样式。
页面尺寸由 <meta name="viewport"> 和 CSS 共同控制
HTML5 可视化编辑器（比如基于 contenteditable、Draft.js、Tiptap 或低代码平台）本身不直接“设置页面尺寸”，真正起效的是 HTML 的视口声明和容器样式。很多编辑器渲染区默认撑满父容器，若没显式约束，就容易在移动端缩放异常、PC 端内容溢出或打印错位。
关键点：<meta name="viewport"> 影响整个页面的缩放逻辑，而编辑区域（如 <div contenteditable="true">）的宽高需靠 CSS 控制，二者缺一不可。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">是移动端基础，但可视化编辑常需固定宽度（如 A4 打印尺寸），此时应设width=960或width=794（px）等具体值 - 编辑容器建议用
max-width+margin: 0 auto居中，避免全屏拉伸导致排版失控 - 若编辑器嵌在 iframe 中，iframe 的
width和height属性或内联 style 会覆盖内部 viewport 行为，需同步调整
CSS 设置编辑区域尺寸时，box-sizing: border-box 必须开启
可视化编辑器里频繁插入图片、卡片、表格等带 padding/margin/border 的元素，若用默认 box-sizing: content-box，设置 width: 800px 后加上 20px padding 就实际占 840px，极易突破容器边界，拖拽错位、滚动条意外出现。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 全局重置：在编辑器根容器上加
*, *::before, *::after { box-sizing: border-box; } - 编辑区域（如
#editor）必须显式设width: 100%; max-width: 800px;，而非仅width: 800px，兼顾响应式回退 - 避免对
body或html直接设固定 width，会导致横向滚动条或截断，应限定在编辑内容容器内
导出 PDF 或打印时，@media print 和 size CSS 属性比 HTML 尺寸更关键
可视化编辑器点击“导出 PDF”时，浏览器或后端服务（如 Puppeteer）依赖的是 CSS 媒体查询和分页控制，不是 HTML 的 <meta>。常见问题：A4 页面内容被压缩成半页、文字过小、跨页截断表格。
解决路径：
- 用
@media print { @page { size: A4; margin: 1cm; } }显式声明纸张，注意部分浏览器（如 Firefox）要求@page必须在顶层 CSS 中，不能在 style 标签内动态注入 - 编辑区域需加
page-break-inside: avoid;防止标题和段落被拆到不同页 - 慎用
vh/vw单位——打印时它们无意义，应统一转为px或cm（如 A4 宽 21cm ≈ 794px @96dpi）
第三方可视化库（如 Quill、CKEditor 5）的尺寸配置藏在初始化选项里
这些库默认不暴露“页面尺寸”概念，但提供容器控制钩子。例如：
- Quill：传入
bounds选项限制滚动范围，用theme: 'snow'时需额外给.ql-editor设min-height和max-height - CKEditor 5：通过
config.height = '600px'控制编辑器高度，但宽度仍由父容器决定；若要模拟文档纸张效果，得在外层套一个<div class="document-page">并配 CSS - Tiptap：无内置尺寸参数，完全依赖你给
contenteditable元素的 class，推荐用prose prose-sm max-w-none（Tailwind）配合自定义宽度
最易忽略的一点：所有这些库在 SSR（服务端渲染）或 Shadow DOM 环境下，CSS 作用域可能失效，width 设置会被父级样式覆盖，必须用 !important 或 ::ng-deep（Angular）等穿透手段确保生效。
