HTML5弹窗需用<dialog>、div+CSS+JS或window.open()实现；<dialog>须用CSS设宽高，推荐width/max-width与height/max-height组合；div模拟需fixed定位+box-sizing:border-box；window.open()尺寸控制不可靠，仅限用户手势触发的独立页面。
HTML5 本身没有内置的“弹窗”元素，所谓“弹窗”基本都是用 <dialog>、div + CSS + JavaScript 模拟，或调用 window.open()（已受现代浏览器严格限制）。调整大小的方式完全取决于你用的是哪一种实现。
用 <dialog> 时怎么设宽高
<dialog> 是 HTML5 原生语义化弹窗标签，但默认无样式、无尺寸控制，必须靠 CSS 设置。它不支持 width/height 属性，只能用 CSS 控制。
- 直接在
<dialog>上加style或类名，用width/max-width/min-width和height/max-height控制 - 注意：
<dialog>默认是display: none，打开后由showModal()或show()切换为display: block，此时 CSS 才生效 - 避免只设
width不设max-width，否则在小屏设备上会横向溢出
<dialog id="myDialog" style="width: 90%; max-width: 600px; height: 80vh; max-height: 500px;">
<p>这是内容</p>
<button onclick="this.closest('dialog').close()">关闭</button>
</dialog>
<script>
document.getElementById('myDialog').showModal();
</script>
用 div 模拟弹窗时怎么精准控制尺寸
这是最常见做法，灵活性高，但需手动处理遮罩层、焦点捕获、ESC 关闭等。尺寸控制完全依赖 CSS 定位和盒模型。
- 推荐用
position: fixed+top/left/transform居中，避免依赖父容器 - 用
width和height设固定值，或用vw/vh做响应式（如width: 95vw，max-width: 800px） - 务必加
box-sizing: border-box，否则 padding/border 会撑大实际尺寸 - 如果内容动态加载，记得在内容渲染完成后调用
scrollHeight或offsetHeight判断是否需要重设高度
window.open() 还能用吗？怎么设大小
能用，但几乎不可靠：所有主流浏览器（Chrome、Edge、Firefox）默认拦截非用户手势触发的 window.open()，且即使成功，也会忽略 width/height 参数，强制新开标签页或最小化窗口。
立即学习“前端免费学习笔记（深入）”；
- 仅限用户点击等明确交互后立即调用（比如
button.onclick = () => window.open(...)） - 参数中
width和height必须是数字，不能带单位（如width=800，不是width=800px） - 实际效果取决于浏览器策略：Chrome 110+ 默认禁用弹窗尺寸控制，只允许新开标签页
- 不建议用于网站内功能弹窗，仅适用于独立工具页、调试页等低耦合场景
const popup = window.open( 'popup.html', '_blank', 'width=800,height=600,left=100,top=100,scrollbars=yes' );
容易被忽略的关键点
尺寸只是表象，真正影响体验的是响应式行为和可访问性：
-
<dialog>必须配role="dialog"（虽然原生已有，但旧浏览器或读屏器可能需要显式声明） - 任何弹窗都应支持键盘关闭（ESC）、焦点自动进入、关闭后焦点返回触发元素
- 移动端要禁用
user-scalable=no类设置，否则缩放失效导致内容被裁切 - 用
vh单位时注意 iOS Safari 的地址栏隐藏/显示会改变视口高度，造成弹窗跳动
