视口（Viewport）是用户在浏览器中可见的网页区域。在移动设备上，视口通常比屏幕的实际分辨率更小，浏览器通过缩放来适配内容。

视口分为布局视口（Layout Viewport）、视觉视口（Visual Viewport）和理想视口（Ideal Viewport）。理解视口概念是做好响应式设计的基础。使用 <meta name="viewport" content="width=device-width, initial-scale=1"> 可以让移动浏览器以设备实际宽度渲染页面，避免缩放问题。这个工具帮助开发者在不同视口尺寸下预览和测试网页效果。

使用方法非常简单：
① 在顶部的URL输入框中输入你要预览的网页地址，点击"加载"按钮或按回车键；
② 使用宽度和高度输入框设置目标视口尺寸（单位：像素），或直接点击预设设备按钮快速切换；
③ 点击旋转按钮可快速交换宽高，模拟横竖屏切换；
④ 使用缩放滑块调整预览大小，点击"适应屏幕"可自动适配当前窗口；
⑤ 点击"新窗口"按钮可在新标签页中打开目标URL。

提示：预览框架的顶部标签会实时显示当前模拟的视口尺寸和设备名称。

部分网站无法在iframe中加载，通常是因为服务器设置了以下安全策略：

• X-Frame-Options：HTTP响应头，设置为 DENY 或 SAMEORIGIN 会阻止iframe嵌入；
• Content-Security-Policy (CSP)：通过 frame-ancestors 指令限制嵌入来源；
• 跨域限制：某些网站检测到被嵌入后会主动跳出iframe。

解决方案：对于本地开发服务器（localhost），通常没有这些限制，可以正常预览。对于生产环境，可以使用浏览器扩展临时禁用这些安全头，或使用代理工具。

<meta name="viewport" content="..."> 是响应式设计的核心标签，常用属性包括：

• width=device-width：将布局视口宽度设置为设备的理想视口宽度（如iPhone 14为390px）；
• initial-scale=1：初始缩放比例为1:1，防止页面被自动缩放；
• minimum-scale / maximum-scale：限制用户可缩放的范围；
• user-scalable=no：禁止用户手动缩放（不推荐，影响无障碍体验）。

使用本工具可以直观地测试不同视口设置对页面布局的影响。

以下是业界常用的响应式断点参考（基于Bootstrap 5）：

• XS（超小屏）：< 576px —— 手机竖屏
• SM（小屏）：≥ 576px —— 手机横屏 / 大屏手机
• MD（中屏）：≥ 768px —— 平板竖屏
• LG（大屏）：≥ 992px —— 平板横屏 / 小笔记本
• XL（超大屏）：≥ 1200px —— 桌面显示器
• XXL：≥ 1400px —— 大屏桌面 / 2K+

最佳实践：根据内容而非设备来设置断点，使用本工具可自由测试任意像素尺寸。

热门手机（CSS像素/逻辑分辨率）：
• iPhone SE：375 × 667
• iPhone 14 / 15：390 × 844
• iPhone 14/15 Pro Max：430 × 932
• Samsung Galaxy S23：360 × 780
• Google Pixel 7：412 × 915

热门平板：
• iPad (第9代)：768 × 1024
• iPad Pro 12.9"：1024 × 1366
• iPad Mini：744 × 1133

桌面：
• 1366 × 768（常见笔记本）
• 1920 × 1080（Full HD）
• 2560 × 1440（2K / QHD）

响应式设计（Responsive Design）使用CSS媒体查询和弹性布局，页面在所有设备上使用同一套HTML代码，布局连续平滑地响应视口变化。特点是使用百分比宽度、flexbox、grid等。

自适应设计（Adaptive Design）为特定屏幕尺寸设计多个固定布局，服务器或前端检测设备类型后加载对应版本。布局在断点处跳跃式切换。

现代Web开发主流采用响应式设计，因为它更灵活、维护成本更低。本工具非常适合测试响应式网站在任意尺寸下的表现。

推荐测试策略：
① 先测试最小支持宽度（如320px，这是较老手机的最小宽度）；
② 测试主流手机尺寸（375px-430px），覆盖大部分移动用户；
③ 测试平板过渡尺寸（768px-1024px），检查横竖屏切换；
④ 测试桌面常见尺寸（1366px、1920px），确保大屏体验良好；
⑤ 测试极端尺寸（如2560px超宽屏或240px超小屏），确保边界情况不崩溃。

使用本工具的预设按钮可快速切换这些尺寸，大大提升测试效率。