想要准确预览网页在手机上的呈现效果？光靠缩放窗口或者改个User-Agent可不够。

真正的关键在于启用Edge开发者工具的设备仿真功能——只有它才能触发响应式CSS媒体查询、触摸事件监听器、方向传感器这些移动端特有的逻辑。否则，你看到的基本只是个“放大版的PC页面”。

调出开发者工具

先把工具调出来。在目标网页上右键→选择“检查”，或者直接按F12键打开开发者工具。

左上角有个“切换设备模拟器”图标，长得像手机叠加平板的小矩形。点击之后界面立刻变成可拖拽调整的移动视图。

注意：这一步必须在页面加载完成后再操作，否则部分设备参数可能不会正确应用。

如果你发现那个图标不见了，别慌——确认开发者工具当前在“Elements”标签页，并且窗口宽度小于600px时该按钮会自动隐藏。这时需要把开发者工具面板拉宽一些再试。

打开开发者工具并进入设备模拟模式

选择预设设备

工具就绪后，最直接的方法是选个预设设备。点击顶部设备下拉菜单，从列表里挑一个真实机型，比如iPhone 14 Pro、Galaxy S23、iPad Air。

这些预设项不只是改个尺寸，还会自动注入对应的User-Agent和触摸支持标志——这是单纯调整窗口大小绝对做不到的。

添加自定义设备

如果预设列表里没有你想要的设备，那就在设备菜单底部点“Edit…”，进入设备管理界面。再选“Add custom device”，填入自定义名称、宽度（比如414）、高度（比如896）、DPR（2）、UA字符串（例如iOS 17.5 Safari）。保存之后就能在列表里调用了。灵活程度很高，覆盖绝大多数测试场景。

快速选择主流预设设备

手动调节视口

不过，预设设备有时候并不完全符合你的测试需求——比如你想模拟一个特定分辨率的折叠屏，那就需要手动调节了。

在设备工具栏中，直接拖动视口右下角的控制点，可以实时缩放画面。也可以点击宽度/高度数值框，手动输入像素值，比如375×812来模拟iPhone X竖屏。双击数值还能精准微调，非常方便。

横竖屏切换

横竖屏切换也很关键。点击旋转按钮（）就能快速翻转。某些页面的CSS @media (orientation: landscape)规则只在这种模式下才会生效，不转一下你根本发现不了问题。

启用触摸事件

如果你需要测试触摸交互，那就要做更多一步操作。点击工具栏右侧的“更多选项”（），选择“Sensors”，然后开启“Touch events”。

这一步之后，网页才会真正识别touchstart/touchend这类触摸事件，否则所有触摸交互逻辑都不会触发。

另外，在Sensors面板里还能设置“Orientation”为“Portrait upside down”或“Landscape left”，用来验证页面是否正确响应设备方向变化。这些细节往往是前端排查中容易被忽略的雷区。

手动调节与进阶控制

总的来说，用Edge开发者工具做设备仿真，核心思路就是三步：进模拟模式、选或配设备、调触摸和方向参数。别嫌麻烦，这些动作的排列组合能覆盖市面上绝大多数移动端场景，比用真机来回切效率高得多。

《夸克》非常好用的免费AI浏览器

下载APP查看