纯HTML+CSS可实现逼真手机外框：设.device-iphone为375×812px、12px黑边、::before内凹屏区（inset:12px、圆角44px）、::after画顶部听筒条；内容必须用同源iframe嵌入并加sandbox="allow-scripts allow-same-origin"，子页需独立配置viewport。
直接用纯 HTML + CSS 做一个「手机设备模拟器外框」，不是为了替代 Chrome DevTools 的设备模拟，而是为了在文档、演示页、设计稿或静态预览页里，把你的 H5 页面“套进”一个逼真的 iPhone 或 Android 外壳里——这事完全可行，且不需要 JS、不依赖第三方库，关键就三点：尺寸对、边框真、iframe 内容可交互。
怎么用 CSS 画出一个像样的 iPhone 外框
别去套用网上那些带复杂阴影和渐变的“高仿”代码，容易失真还难调。实际项目中更推荐用 .device-iphone 类配合固定宽高 + 圆角 + 边框 + 伪元素做内凹效果：
-
width: 375px; height: 812px;对应 iPhone X/12/13 系列标准竖屏尺寸（逻辑像素） -
border: 12px solid #000;模拟黑边，比纯box-shadow更可控 - 用
::before绘制屏幕区域：设content: ""、position: absolute、inset: 12px（即上下左右各缩进 12px），再加border-radius: 44px匹配刘海区曲率 - 顶部加一个
::after画听筒条：top: 16px; width: 60px; height: 4px; background: #333;
为什么 iframe 是最稳妥的内容嵌入方式
很多人想用 <div> 直接塞内容，结果发现 touch 事件失效、<code>viewport 不生效、localStorage 报错——根本原因是：只有 iframe 能复现真实页面的独立上下文。你本地起服务后，src 必须是同源 URL（比如 http://localhost:5500/demo.html），不能是相对路径或 file://：
- 错误写法：
<iframe src="index.html"></iframe>→ 触发跨域或协议限制 - 正确写法：
<iframe src="http://localhost:5500/index.html" sandbox="allow-scripts allow-same-origin"></iframe> - 必须加
sandbox属性，否则现代浏览器会拦截脚本执行；allow-same-origin才能让localStorage和fetch正常工作 - 记得给
iframe设width: 100%; height: 100%并清除默认边框：frameborder="0"
移动端 viewport 在 iframe 里还管用吗
管用，但只对 iframe 内部页面生效——也就是说，你必须在被嵌入的 index.html 的 里写对 <meta name="viewport">，父页面的 viewport 完全不影响它：
立即学习“前端免费学习笔记（深入）”；
- 必须写：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 禁止写
user-scalable=no，否则 iOS Safari 会忽略整个标签（iOS 13+ 行为） - 如果子页面本身是固定宽度（如 375px），可改用
content="width=375"，但得同步确保其根容器有max-width: 375px; margin: 0 auto; - 别指望靠父页面 CSS 缩放 iframe 来“模拟” zoom —— 这会让 touch 坐标错乱、
clientX/Y失准，轮播图和拖拽直接瘫痪
真机扫码预览时外框消失？这是正常现象
你在桌面端用 Chrome DevTools 模拟 iPhone 查看带外框的页面，一切正常；但用手机微信或 Safari 扫码打开，只看到裸内容——这不是 bug，是预期行为。因为：
- 设备模拟器外框本质是「装饰层」，靠 CSS 定位包裹
iframe，而真机浏览器没有「模拟设备」这层抽象，它只渲染真实视口 - 如果你需要真机也显示外框，必须把外框 HTML/CSS 一起打进子页面（即
index.html自己画壳），而不是靠父页套娃 - 更现实的做法是：开发阶段用外框页预览 + 调试，上线前删掉外框层，只留业务代码
