dialog默认不响应式，必须用position:fixed+transform居中并设max-width/max-height；否则小屏易溢出，因浏览器未约束其尺寸，width:100%无效且safari等存在兼容问题。
dialog 默认不响应式，必须手动加 max-width、max-height 和 transform 居中逻辑，否则在小屏上会溢出或错位。
为什么直接写 <dialog></dialog> 在手机上会显示不全
浏览器对 dialog 的默认尺寸没做响应式约束：Chrome 默认给 16px 外边距、Safari 可能忽略 width: 90%、Firefox 在 zoom 缩放下容易撑破视口。不加限制时，大图或长文本会横向滚动，甚至遮罩层被截断。
关键点：
-
dialog的尺寸计算基于其内容，不是父容器，width: 100%没用 -
dialog::backdrop不支持z-index，遮罩层级靠dialog自身的z-index控制 - 移动端双击缩放可能触发图片放大，需在
<img>上加style="max-width:90%"
dialog 居中 + 响应式 CSS 必须写的几行
只靠 margin: auto 或 text-align: center 无效。必须用定位 + 变换，且要兼容 Safari 的渲染 bug（比如父元素有 transform 时 dialog 错位）：
dialog {
margin: 0;
padding: 1em;
border: none;
border-radius: 8px;
max-width: 90vw;
max-height: 90vh;
width: fit-content;
height: fit-content;
}
<p>dialog::backdrop {
background-color: rgba(0, 0, 0, 0.7);
}</p><p>/<em> 真正居中 </em>/
@supports (display: dialog) {
dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}</p>
注意：fit-content 在 Safari 16.4+ 才稳定，旧版建议 fallback 到 max-width: 500px。
图片弹窗场景下，src 动态赋值和加载时机
常见错误是把大图 src 写死在 HTML 里，导致所有缩略图点击都显示同一张图；或者没等图片加载完就测尺寸，造成布局抖动或错位。
正确做法：
- HTML 中
<img id="dialog-img" src="">，空src - JS 中先设
img.src = fullSrc，再监听img.onload，最后调用dialog.showModal() - 加载失败时，用
img.onerror显示占位文字并dialog.close() - 避免在
dialog内用position: fixed子元素（Safari 渲染异常）
Safari 兼容性补丁：运行时检测 + 最小 polyfill 封装
仅靠 @supports (display: dialog) 不够——Safari 15.4 支持标签但不支持 showModal()，iOS 16.3 有 backdrop 点击无事件的问题。
安全检测写法：
if (typeof HTMLDialogElement === 'undefined' ||
!('showModal' in HTMLDialogElement.prototype)) {
// 加载 dialog-polyfill 或 fallback 到手写 div 遮罩
}
真正影响体验的不是“能不能显示”，而是焦点管理、Esc 响应、Backdrop 点击关闭这三件事。如果项目需支持 iOS 15 或 Android WebView 旧版本，别硬扛原生 dialog，直接用 dialog-polyfill 注册后再调用 showModal() 更省心。
最易被忽略的是：关闭后焦点没回退到触发按钮，用户按 Tab 键会跳进不可见区域——必须在 close 事件里显式调用 triggerButton.focus()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
