多设备同步预览框架 - iframe并排

多设备同步预览框架是前端开发和UI/UX设计中的重要工具，它允许开发者同时在多个设备模拟器中加载同一个网页，直观对比网站在手机、平板、桌面等不同屏幕尺寸下的显示效果。主要用于响应式设计验证、跨设备兼容性测试、以及向客户展示多端适配效果。通过并排预览，可以快速发现布局断裂、元素错位、字体大小不合适等响应式问题，大幅提升开发和设计效率。

部分网站无法在iframe中加载，通常是由于以下安全策略：
1. X-Frame-Options 响应头：网站服务器设置了 DENY 或 SAMEORIGIN，禁止被其他域名嵌套（如 google.com、facebook.com）；
2. Content-Security-Policy (CSP)：通过 frame-ancestors 指令限制了嵌套来源；
3. 混合内容限制：HTTPS站点无法加载HTTP资源；
4. 跨域认证问题：涉及登录态/cookie的站点在跨域iframe中受限。
这是浏览器的安全机制，工具无法绕过。建议使用本地开发环境或允许iframe嵌套的测试站点进行预览。

每个设备预览使用设备的真实CSS像素分辨率（如iPhone 14 Pro为390×844px）。iframe以原始分辨率渲染，然后通过CSS transform: scale() 按比例缩放到统一预览高度（可通过滑块调整，默认480px）。缩放比例 = 统一高度 / 设备原始高度。
例如：iPad Mini (768×1024) 在480px统一高度下，缩放比为 480/1024 ≈ 0.469，显示宽度 = 768 × 0.469 ≈ 360px。
这种方式保证了像素级别的精确比例，显示效果与真实设备一致。设备外壳（边框、刘海、Home指示器）为装饰性模拟，不影响内容比例。

由于浏览器同源策略和跨域安全限制，工具无法直接控制跨域iframe内部的滚动行为。如果预览的网站与工具同源，理论上可以通过 postMessage API 实现同步滚动。
当前工具提供同步加载和同步刷新功能——所有设备会加载相同的URL，点击"全部刷新"可同时重新加载所有预览。未来版本可能会针对同源场景加入同步滚动支持。

推荐的测试设备组合策略：
最小组合：1台手机（iPhone 14 Pro 390×844）+ 1台桌面（1920×1080），覆盖移动端和桌面端；
标准组合：手机 + 平板 + 桌面，如 iPhone 14 Pro + iPad Mini + Desktop 1080p，覆盖三大类设备；
全面组合：添加不同分辨率手机（小屏375px + 大屏412px）+ 横竖屏切换 + 不同桌面分辨率，覆盖主流市场设备。
建议参考Google Analytics 或类似工具分析目标用户的设备分布，针对性地选择预览设备。

响应式设计（Responsive Web Design）是一种网页设计方法，使网站能够自适应不同屏幕尺寸和设备。
Viewport（视口）：<meta name="viewport" content="width=device-width"> 告诉浏览器使用设备实际宽度渲染页面，是响应式的基础；
CSS媒体查询（Media Queries）：如 @media (max-width: 768px) { ... }，根据屏幕宽度应用不同样式，实现断点布局切换；
弹性布局：使用Flexbox、Grid、百分比单位、clamp()、vw/vh 等实现流式布局。
本工具帮助开发者同时观察多个断点下的页面表现，是验证响应式设计的得力助手。

点击设备卡片上的旋转按钮（）可以交换设备的宽高，模拟横屏/竖屏切换。
实际意义：用户在手机上可能旋转设备查看内容，横屏时布局空间更宽（如844×390），可能导致导航栏、图片网格、文字排版等发生显著变化。验证横竖屏表现可确保完整的用户体验，尤其对视频播放、游戏、图表展示等场景至关重要。平板设备（如iPad）用户更常在横屏模式下使用，需重点测试。