拖拽拉伸，实时预览响应式效果
移动端设备预览工具是一款面向前端开发者与 UI 设计师的响应式调试利器。输入任意网址，即可在桌面浏览器中以真实的手机、平板尺寸加载目标页面，无需切换真机或反复刷新。你可以直接拖拽外框四角与四边的手柄，把视口拉伸到任意宽高，断点表现一目了然；也可以从左侧设备库中选择 iPhone、Android、iPad 等主流机型，一键套用官方分辨率。配合横竖屏切换、缩放滑块与 PWA 全屏模拟，所见即所得地还原用户在不同设备上的真实浏览体验。整个过程纯本地运行，不上传任何数据，打开即用。
使用教程
- 在顶部地址栏输入要预览的网址，点击「预览」加载页面。
- 从左侧设备面板选择机型，或拖动外框手柄自由调整视口宽高。
- 点击「旋转」在竖屏与横屏之间切换，验证横向布局。
- 拖动底部缩放滑块（50%–200%）让大尺寸设备完整显示在窗口内。
- 打开「PWA」开关，模拟添加到主屏后的全屏沉浸式效果。
- 需要特殊尺寸时，点击「自定义尺寸」输入精确的宽高数值。
常见问题
为什么有些网站无法在预览框中显示？
部分网站通过 X-Frame-Options 或 Content-Security-Policy 响应头禁止被 iframe 嵌入（如部分银行、搜索引擎、社交平台）。这是目标网站的安全策略，浏览器会拒绝加载，属于正常现象，并非工具故障。建议用自己有权限或允许嵌入的页面进行测试。
预览效果和真机完全一致吗？
本工具按设备的 CSS 视口尺寸还原布局，能准确反映响应式断点与布局表现。但真机的字体渲染、触摸交互、设备像素比等细节仍存在差异，正式发布前建议在真机上做最终验证。
拖拽和缩放有什么区别？
拖拽改变的是页面实际的视口尺寸，会触发媒体查询和响应式布局变化；缩放只是整体放大或缩小预览画面，不影响页面认为的视口大小，方便在小窗口里查看大设备的完整内容。
会上传我输入的网址或数据吗？
不会。所有操作都在你本地浏览器中完成，网址仅用于在 iframe 中加载页面，工具本身不收集、不上传任何数据。