在 Edge 浏览器里准确预览网页在不同手机和平板上的显示效果，关键不在于把窗口拖小，而是必须通过开发者工具启用设备仿真功能。 很多人习惯性地只缩放页面窗口，结果发现响应式 CSS 媒体查询没触发，触摸交互也完全不响应。 这不奇怪，因为那些规则本来就只认设备特征，不认窗口大小。

先说一下具体怎么操作。

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

在目标网页上右键，选择“检查”，或者直接按 F12 键打开开发者工具。这一步没什么悬念。

重点在于：打开后，点击左上角的“切换设备模拟器”图标——就是那个手机加平板叠在一起的矩形按钮。点下去之后，界面立刻会变成可拖拽调整的移动视图。

注意一个小细节：必须在页面完全加载后再操作这一步，否则部分设备参数可能无法正确应用。另外，如果那个图标根本找不到，先检查一下开发者工具是否处于默认的“Elements”标签页，同时确认窗口宽度没有被压缩到极窄状态——当宽度小于600px时，这个按钮会自动隐藏，这时候需要先把窗口拉宽一点。

快速选择主流预设设备

有两种方式快速进入设备仿真。

方法一：直接选取真实机型

点击顶部设备下拉菜单，从列表里选取 iPhone 14 Pro、Galaxy S23、iPad Air 这类真实机型。Edge 会自动调整视口尺寸和 UA。

方法二：添加自定义设备

如果预设列表里没有你想要的设备，在菜单底部点击“Edit…”，进入设备管理界面，选择“Add custom device”。然后填入自定义名称、宽度（比如414）、高度（比如896）、DPR（2）、UA字符串（比如 iOS 17.5 Safari），保存后就能在列表中调用了。

额外说明：预设设备的好处不只是调整视口尺寸，它还会自动注入对应设备的 User-Agent 和触摸支持标志。这些靠手动拖窗口是做不到的——单纯调整窗口大小只是改变了可视区域，而设备仿真会真正改变浏览器向页面报告的设备特征。

手动调节与进阶控制

通过以下步骤进行精细调节：

• 第一步：调整视口尺寸 在设备工具栏中，直接拖拽视口右下角的控制点，可以实时缩放画面。也可以点击宽度/高度数值框，手动输入像素值——比如输入375×812，就能模拟iPhone X竖屏效果。
• 第二步：切换横竖屏 点击旋转按钮（）切换横竖屏。看起来很简单，但这里有个关键点：某些网页的CSS @media (orientation: landscape) 规则只在横竖屏切换模式下才会生效，单纯调整宽度高度是触发不了的。
• 第三步：开启触摸事件 点击工具栏右侧的“更多选项”（），选择“Sensors”，然后开启“Touch events”。这一步很容易被忽略，但如果不打开，所有依赖 touchstart/touchend 事件的交互都不会触发——比如手势滑动、点击反馈、拖拽操作等。
• 第四步：验证设备方向响应 在 Sensors 面板中，还可以设置“Orientation”为“Portrait upside down”或“Landscape left”，用来验证页面是否正确响应设备方向变化。有些页面在方向锁定或反向旋转时可能出现布局错乱，正是需要这么测的。