📸 网站截图预览
多设备预览 · PC/平板/手机
输入URL并选择设备预览
部分网站禁止iframe嵌入，可能无法预览
多设备预览 · PC/平板/手机
部分网站禁止iframe嵌入，可能无法预览
最常见原因是目标网站设置了X-Frame-Options或Content-Security-Policy禁止被iframe嵌入，这类网站在任何"嵌入预览"工具里都显示不出来。这是网站主动的安全策略，不是工具问题。
本工具用iframe实际加载真实网站，属于"实时预览"，不是拍下来的一张静态图。它能看响应式布局效果，但不会保存成图片文件。要真截图可配合浏览器截图或专业截图API。
用iframe+CSS缩放模拟移动端尺寸，视觉布局和真机基本一致，但真机上的滚动回弹、touch手势、视口动态变化等细节有差异。做初步判断够用，最终还需真机验证。
一般是这几种情况：1) 网站对移动端做了强制跳转或弹窗；2) 网站用JS检测iframe环境拒绝渲染；3) 网站依赖登录态或Cookie。这类网站无论什么工具都难以在沙箱里正常预览。
会。iframe加载的是真实完整页面，图片、脚本、字体全都要加载，比普通网页预览重得多。卡片越大越卡，移动端尤其明显。建议只预览需要核对的页面，不要长时间挂着。
不能。浏览器安全策略不允许在https页面里嵌入http或不安全的本地资源，且本工具运行在你浏览器里，访问的都是公网地址。内网/本地页面请直接在本机浏览器打开。
PC(1280)、平板(768)、手机(375)是三个代表主流断点的宽度，能反映绝大多数响应式设计的表现。但不同手机宽度差异大，精细调样式时建议用浏览器自带设备模拟器选具体机型。
开发过程中快速切换三种尺寸看布局是否塌陷、是否横向溢出，是很好的快速检查手段。但正式上线前一定要用浏览器DevTools的设备模拟器或真机做最终验收。
网站能否被iframe嵌入，取决于它自己答不答应。这两个响应头是"大门上锁"的关键：
| 机制 | 作用 | 典型写入 |
|---|---|---|
| X-Frame-Options | 简单地禁止嵌入 | DENY / SAMEORIGIN |
| Content-Security-Policy | 更灵活地限制来源 | frame-ancestors \u0027none\u0027 |
| JS检测 | 页面脚本主动拒绝 | window.top != window.self 时跳转 |
| meta标签 | 页面内声明 | <meta http-equiv=\u0027X-Frame-Options\u0027> |
安全要求高的网站（银行、支付等）几乎都会锁死嵌入，这是保护用户不被钓鱼的正常做法。
响应式设计离不开"断点"(breakpoint)，也就是在哪些屏幕宽度下切换布局。主流实践常用这几个断点。
| 断点值 | 代表设备 | 布局建议 |
|---|---|---|
| 375px | 手机竖屏 | 单栏为主 |
| 768px | 平板 | 可切两栏 |
| 1024px | 小笔记本 | 两到三栏 |
| 1280px+ | 桌面 | 多栏/最大化 |
本工具的PC/平板/手机三档正好对应这几个主流档位，够做日常快速检查。
iframe预览不是万能的，知道它的边界，才能避免被"看起来没问题"误导。
| 维度 | iframe预览 | 浏览器DevTools | 真机 |
|---|---|---|---|
| 触控手势 | 不支持 | 可模拟 | 完整支持 |
| 滚动惯性 | 不支持 | 部分 | 完整支持 |
| 登录态 | 大多无 | 有 | 有 |
| 性能真实度 | 较卡 | 真实 | 真实 |
| 最终验收 | 不建议 | 可辅助 | 推荐 |
把它定位成"快速视觉检查工具"，复杂交互和最终验收交给真机。
用移动端预览时，多留意这几个高频问题：
| 问题 | 现象 | 修复方向 |
|---|---|---|
| 横向溢出 | 出现横向滚动条 | 排查固定宽度/用max-width |
| 点击区域太小 | 难点中 | 确保交互元素≥44px |
| 字体过小 | 正文难读 | 正文建议≥16px |
| 固定定位遮挡 | 悬浮层盖内容 | 调整层级与位置 |
三种尺寸各切一遍，主要就看这几个地方有没有问题。
| 设备类型 | 代表宽度 | 典型机型 |
|---|---|---|
| 手机竖屏 | 375px | iPhone 14/15、小米14 |
| 手机横屏 | 667-844px | — |
| 平板 | 768px | iPad mini |
| 小笔记本 | 1024px | 13寸笔记本 |
| 桌面 | 1280px+ | 24寸显示器 |
| 现象 | 可能原因 | 处理建议 |
|---|---|---|
| 白屏 | 网站禁止嵌入/JS拒绝 | 换curl或真机验证 |
| 布局错乱 | CSS缩放与真实视口差异 | 用DevTools设备模拟器 |
| 加载卡顿 | 资源过多 | 仅预览目标页面 |
| 交互失效 | 沙箱限制 | 正式功能用真机 |
| 强制跳转 | 移动端跳转逻辑 | 关闭移动端重定向再试 |
1. 输入网站URL（含https://）。
2. 选择预览设备：PC端、平板、手机。
3. 查看网站在不同设备上的展示效果。
4. 切换设备对比响应式布局。
提示：部分网站禁止iframe嵌入，可能无法预览。