全屏模式需调用showmodal()才能显示，仅css设置无效；showmodal()触发焦点锁定、esc关闭及backdrop遮罩，其样式须用dialog::backdrop{}自定义，且元素必须已挂载dom。
dialog在全屏模式下不显示？先确认showModal()是否被调用
HTML <dialog></dialog> 默认是隐藏的，即使设置了display: block或visibility: visible也无效。必须显式调用showModal()才能让它以模态方式呈现（含全屏遮罩）。如果只用show()，它不会居中、无背景遮罩、也不拦截焦点，更谈不上“全屏感”。
常见错误：用CSS强行撑满视口（比如width: 100vw; height: 100vh;）但没调showModal()，结果元素渲染了却不可见、无法交互、甚至被其他内容覆盖。
-
showModal()是唯一能触发原生模态行为（焦点锁定、ESC关闭、点击 backdrop 关闭）的方法 - 调用前确保
<dialog></dialog>已挂载到DOM，否则会抛DOMException: The element is not in a document - 不要在
document.body外的容器里直接appendChild后立刻调用——浏览器可能尚未完成布局，建议加requestAnimationFrame延迟一帧
全屏效果依赖backdrop伪元素样式，不是<dialog></dialog>本身
真正实现“全屏遮罩”的是dialog::backdrop，它是一个覆盖整个视口的半透明层。默认样式由浏览器提供（如Chrome中是background: rgba(0,0,0,0.2)），但可自定义。如果看不到全屏灰幕，大概率是::backdrop被重置或未生效。
注意：::backdrop只在showModal()激活时存在，且不能通过JavaScript访问（没有对应DOM节点），只能用CSS控制。
- 必须用
dialog::backdrop { background: rgba(0,0,0,0.5); }，不能写成dialog::backdrop::before或误加空格 - 某些旧版Safari（::backdrop，需用JS模拟遮罩层作为降级方案
- 若页面有
transform、filter或will-change等属性作用于或祖先元素，可能使::backdrop渲染异常或消失
让dialog内容真正“全屏”需手动设置尺寸和定位
<dialog></dialog>本身默认是“最小内容宽高+内边距”，不是全屏。要让它铺满视口，得靠CSS强制拉伸，同时处理滚动与焦点问题。
dialog {
margin: 0;
width: 100vw;
height: 100vh;
max-width: none;
max-height: none;
border: none;
padding: 0;
}
dialog::backdrop {
background: #00000080;
}
- 必须设
margin: 0，否则默认margin: 1em会在四周留白 -
max-width/height: none是为了覆盖浏览器内置的最大限制（如Chrome默认max-width: 600px） - 如果内容超出视口，应给内部容器设
overflow-y: auto，而不是让<dialog></dialog>自己滚动——后者会导致滚动条出现在遮罩层上，视觉割裂 - 避免在
<dialog></dialog>上设position: fixed，它会破坏原生焦点管理逻辑，导致Tab键无法正确循环
移动端全屏dialog容易被浏览器UI遮挡，需适配viewport
在iOS Safari或Android Chrome中，地址栏、底部导航栏会动态出现/收起，导致100vh计算不准——页面滚动后<dialog></dialog>可能被截断或错位。
这不是<dialog></dialog>的bug，而是vh单位在移动端的固有限制。可靠解法是用100dvh（dynamic viewport height）替代100vh。
-
100dvh在所有现代移动端浏览器中已支持（Chrome 105+, Safari 16.4+, Firefox 110+），它始终等于当前可见视口高度 - 兼容性兜底可用
height: -webkit-fill-available（仅Safari），或用JavaScript监听resize事件动态更新style.height - 不要依赖
orientationchange事件来重设尺寸——该事件已被废弃，且旋转时dvh会自动响应
::backdrop的渲染依赖和100dvh的必要性——这两处出问题，全屏效果就直接失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
