HTML无法生成合规的应用商店截图，因其无法满足尺寸、设备边框、状态栏、DPI等硬性规范，且html2canvas等前端方案存在样式失真、不支持固定定位和跨域资源等问题；必须通过真实设备或模拟器（如Android Studio、Xcode）截取原生画面，再用官方工具添加设备边框。
HTML 本身不能生成应用商店要求的 Screenshots（应用截图）——它只是静态页面，不捕获屏幕，也不符合 Google Play / App Store 对截图的尺寸、设备边框、DPI、状态栏等硬性规范。
为什么直接用 HTML 做 screenshots 是无效的
应用商店（如 Google Play）上传的 screenshots 必须是真实设备或合规模拟器在目标分辨率下截取的 PNG/JPEG 图片，带正确宽高比（如 1080×1920）、无滚动裁剪、无浏览器地址栏/工具栏。HTML 页面即使响应式再好，用 window.print() 或 html2canvas 截出来的图：
- 缺少真实状态栏、导航栏、设备圆角和阴影
- 字体渲染、阴影、动效与原生 App 不一致
- Google Play 会拒绝带“网页”“Chrome”水印或非设备视口的截图
-
html2canvas不支持position: fixed元素、iframe、跨域图片、CSS transforms 等常见样式，极易失真
真正能用于应用商店的截图怎么来
必须从真实运行环境导出，推荐路径如下：
- 安卓：用 Android Studio 的
Device Frame功能（Run → Edit Configurations → Show device frame），真机 USB 连接后用adb shell screencap+adb pull导出，再套官方device-frame-generator工具加边框 - iOS：Xcode 的
Devices and Simulators窗口连接真机，点 “+” 截图；或 Simulator 中按Cmd+S，然后用 Apple 官方screenshot utility批量加 iPhone 边框 - 统一处理：用 Google 提供的
play-screenshot-tool（命令行）或第三方如shot-scraper（需配合 Puppeteer 启动真实 Chromium 实例并模拟设备）
如果非要从 Web 预览页生成近似图，注意这三点
仅适用于内部演示或 PRD 文档，绝不可提交到应用商店：
- 用
puppeteer启动 headless Chrome，设置emulate为具体设备（如devices['iPhone 14 Pro']），调用page.screenshot({ fullPage: true, type: 'png' })—— 这比前端 JS 截图可靠得多 - 截图前必须移除所有调试元素：
document.querySelector('[data-devtools]')?.remove()，禁用控制台日志，隐藏console、React DevTools注入脚本 - 导出后手动用 Photoshop 或
convert（ImageMagick）加白底、居中、留安全边距（Google Play 要求截图顶部 25px 内不能有关键内容）
设备边框、状态栏文字、电量图标这些细节，不是 CSS 能“假装”的；应用商店审核看的是像素级合规。别省那半小时真机截图，后期被拒重传耽误上线节奏更不值。
立即学习“前端免费学习笔记（深入）”；
