dialog横竖屏切换不自动重排布，需用css媒体查询（@media orientation）或js监听resize/ orientationchange事件配合class切换或强制重绘解决，safari backdrop错位需单独处理。
dialog元素在横竖屏切换时不会自动重排布
<dialog></dialog> 本身不监听 window.orientation 或 resize 事件，也不会主动调整 width、height 或 transform。它的尺寸默认由内容决定，且 open 状态下不会因屏幕方向变化而重新计算布局——这和 <iframe></iframe> 或普通 <div> 行为一致，但容易被误以为“应该响应”。
<h3>用 CSS media query 配合 orientation 检测横竖屏</h3>
<p>最轻量、兼容性好（Chrome 37+、Firefox 59+、Safari 15.4+）的方式是用 <code>@media (orientation: portrait) 和 @media (orientation: landscape) 分别控制样式：
@media (orientation: portrait) {
dialog {
width: 90vw;
max-width: 480px;
margin: 2rem auto;
}
}
@media (orientation: landscape) {
dialog {
width: 60vw;
max-width: 800px;
margin: 4rem auto;
}
}
注意：orientation 媒体特性只在移动设备上可靠；桌面浏览器（尤其 Chrome）可能始终报告 portrait，即使你旋转了窗口。实际项目中建议配合 aspect-ratio 或 min-height/max-height 做兜底。
用 JavaScript 监听 resize 并手动触发重绘
当媒体查询不可靠（比如桌面模拟横屏、PWA 全屏模式），需监听 resize 并强制更新 dialog 的样式状态：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 不要直接改
dialog.style.width，容易覆盖 CSS 变量或媒体查询逻辑 - 推荐做法：切换一个 class，例如
dialog.classList.toggle('is-landscape', window.innerWidth > window.innerHeight) - 然后在 CSS 中定义
.is-landscape dialog规则，避免重复写媒体查询 - 注意：iOS Safari 在方向切换瞬间可能触发两次
resize，加个 100ms 防抖更稳
dialog.showModal() 后再旋转屏幕，backdrop 可能错位
这是 Safari（尤其是 iOS 16–17）的已知问题：调用 dialog.showModal() 后旋转设备，半透明 backdrop 会残留旧尺寸，导致点击穿透或遮罩不全。临时解法：
- 在
resize回调里，先dialog.close()再dialog.showModal()（仅限非表单类弹窗，否则会丢失用户输入） - 更稳妥的是：监听
orientationchange事件（仅 iOS/Safari 支持），并在其中调用dialog.style.transform = 'scale(1)'强制重绘 backdrop - 如果用了
dialog::backdrop自定义样式，确保它没设死width/height，改用inset: 0或position: fixed
横竖屏适配 dialog 的关键不在“自动”，而在明确控制触发时机和重绘边界——CSS 媒体查询负责静态响应，JS 负责动态兜底，而 backdrop 错位这种边缘 case，得单独盯住 Safari 的渲染行为。
