设备模拟器

设备模拟器让你输入一个网址,然后把这个网页放进一个固定宽高的「视口框」里显示,用来大致看看网页在手机、平板和桌面屏幕宽度下的排版是否正常。它的原理很简单:页面里嵌入了一个 iframe,把 iframe 设置成 iPhone、iPad 或桌面的常见视口尺寸,再整体缩小到能放进页面。需要先说清楚:它不是真正的手机模拟器,不会修改浏览器标识(User-Agent),不模拟触摸,也不模拟设备像素比;而且不少网站禁止被嵌入,会显示空白。

操作步骤

1. 在「输入要预览的网址」输入框里填写网址,例如 qgjtools.com。如果没有写 http:// 或 https://,工具会自动在前面补上 https://。
2. 点击右侧的「预览」按钮,或者在输入框中直接按回车。
3. 在「选择设备视口尺寸」下点击一个预设:iPhone(竖屏)390×844、iPhone(横屏)844×390、iPad 820×1180、桌面(小)1280×800、桌面(大)1920×1080。当前选中的按钮会变成深色。
4. 页面下方会出现一个带深色边框的预览框,里面是你的网页。切换预设时,预览框会立刻变成对应尺寸,不需要重新输入网址。
5. 如果想看另一个网址,改动输入框里的内容,再点一次「预览」。

预览框是怎么缩放的

预览框的最大显示宽度被固定为 380 像素:如果设备的视口宽度超过 380,整个框会按比例缩小,宽度不超过 380。按照代码里的公式(缩放比 = 380 ÷ 视口宽度,最大为 1)算出来,iPhone 竖屏约为 0.97 倍,iPhone 横屏约为 0.45 倍,iPad 约为 0.46 倍,桌面(小)约为 0.30 倍,桌面(大)约为 0.20 倍。重点是:网页内部看到的仍然是完整的 390、844、820、1280 或 1920 像素宽的视口,所以响应式布局和媒体查询按这些宽度生效;只是画面被缩小后,文字会变得很小,选择桌面(大)时尤其明显,看细节要靠观察整体排版,而不是字体清晰度。

支持范围与已知限制

• 只有 5 个固定预设,不能输入自定义宽高,也没有旋转按钮(横屏是单独的一个预设)。
• 这不是设备模拟:没有模拟 User-Agent、触摸事件、设备像素比、系统状态栏或浏览器工具栏。如果网站是靠识别手机浏览器来返回不同页面,在这里看到的可能还是桌面版,只是被限制了宽度。
• 不少网站(尤其是银行、社交平台、很多使用登录的服务)通过 X-Frame-Options 或 CSP 等安全策略禁止被嵌入其他页面,它们在这里会显示空白或加载失败。页面底部也明确说明:这是对方网站主动设置的限制,不是工具的问题,工具也无法绕过。
• 如果你的预览页面是 https,但输入的是只支持 http:// 的网址,浏览器出于安全考虑通常会阻止这种混合内容的加载,同样会出现空白。可以尝试改用该网站的 https 地址。
• 没有加载失败的提示。页面空白时,工具本身无法区分是网站禁止嵌入、网址不存在还是网络问题。
• 点击「预览」时,如果网址和上一次完全相同,页面不会重新加载,因为状态没有变化。想强制刷新,可以先改动一个字符再改回来。
• 嵌入的是你本机浏览器直接访问的网站,登录状态和交互表现可能与你平时在单独标签页中看到的不同,个别需要弹窗或跳出框架的功能可能无法使用。
• 不会保存历史记录,刷新页面后网址和选择都会回到默认状态。

常见问题:为什么预览框一片空白?

最常见的原因是目标网站禁止被嵌入 iframe。其次可能是网址输入有误、只支持 http 导致被浏览器拦截、或者网站本身加载很慢。先在浏览器新标签里直接打开这个网址,确认它能正常访问;如果能,多半就是对方的嵌入限制,这种网站无法通过本工具预览。

常见问题:它能代替真机测试吗?

不能。它只能帮你快速看一下不同宽度下的布局是否错位、有没有横向滚动条,适合开发过程中的初步检查。触摸交互、手机浏览器的地址栏收放、输入法弹出、不同系统的字体渲染、刘海屏安全区这些,都需要真机或浏览器开发者工具里更完整的设备模式来验证。

常见问题:我可以预览还没上线的本地网页吗?

输入框会自动给没有协议的网址补 https://,所以像 localhost:3000 这样的地址会被改成 https://localhost:3000,很可能无法打开。你需要手动写完整的 http://localhost:3000 才不会被改写。同时由于这个页面通常是 https,浏览器可能拦截 http 的内嵌内容,因此本地页面通常不适合在这里预览。

常见问题:这些预设尺寸准确吗?

它们是常见的视口(CSS 像素)尺寸,例如 iPhone 的 390×844。这是一个典型数值,并不等于所有 iPhone 型号。你自己的设备可以用「设备信息检测」工具查看实际的窗口大小。

隐私与处理方式

工具本身没有服务器,也不会记录或上传你输入的网址。需要知道的是:点击预览后,是你自己的浏览器在直接请求目标网站并显示它,该网站会像你普通访问一样看到这次请求(包括你的 IP 地址等常规信息),并可能执行它自己的统计脚本和 cookie。请只预览你信任的网站,不要在嵌入的页面里输入敏感账号密码。