响应式布局检测
📱 响应式布局检测
{{ getDevice(deviceId).name }}
{{ getDevice(deviceId).width }} × {{ getDevice(deviceId).height }}
请输入网址并点击"开始检测"
📏 当前窗口
窗口宽度
{{ windowInfo.width }}px
窗口高度
{{ windowInfo.height }}px
设备方向
{{ orientation }}
🎨 断点状态
超小屏幕 (xs)
{{ breakpoints.xs ? '✓' : '✗' }}
小屏幕 (sm)
{{ breakpoints.sm ? '✓' : '✗' }}
中等屏幕 (md)
{{ breakpoints.md ? '✓' : '✗' }}
大屏幕 (lg)
{{ breakpoints.lg ? '✓' : '✗' }}
📐 断点定义
xs
< 576px
sm
≥ 576px
md
≥ 768px
lg
≥ 992px
📊 断点预览
💡 功能说明
在线响应式布局检测工具：帮助开发者测试网站在不同设备尺寸下的显示效果，支持多设备同时预览。
- 多设备预览 — 同时查看网站在多种设备上的显示效果
- 设备选择 — 支持iPhone、iPad、Android、笔记本电脑、桌面电脑等多种设备
- 窗口信息 — 实时显示当前浏览器窗口尺寸和设备方向
- 断点状态 — 实时检测当前窗口所处的响应式断点
- 断点预览 — 可视化展示各断点区间及其当前状态
- 响应式调试 — 调整浏览器窗口大小，实时观察布局变化
⚠️ 注意事项
- 检测的网站必须支持嵌入（允许iframe访问）
- 部分网站出于安全考虑可能会阻止iframe嵌入
- 设备预览为模拟效果，实际显示可能略有差异
- 响应式断点定义基于Bootstrap框架标准