在 Microsoft Edge DevTools 中模拟移动设备Emulate mobile devices in Microsoft Edge DevTools

使用“设备仿真”来大致了解你的页面在移动设备上的外观和响应方式。Use Device emulation to approximate how your page looks and responds on a mobile device. Microsoft Edge DevTools 提供了一系列功能,可帮助你模拟移动设备。The Microsoft Edge DevTools provide a collection of features to help you emulate mobile devices. 该系列包括以下功能。The collection includes the following features.

限制Limitations

设备仿真是移动设备中的页面外观的一级近似值Device emulation is a first-order approximation of the look and feel of your page on a mobile device. 设备仿真实际上不会在移动设备上运行你的代码。Device emulation does not actually run your code on a mobile device. 相反,你可以模拟笔记本电脑或台式机的移动用户体验。Instead you simulate the mobile user experience from your laptop or desktop.

移动设备的某些方面从不在 DevTools 中模拟。Some aspects of mobile devices are never emulated in DevTools. 例如,移动 CPU 的体系结构与笔记本电脑或台式机 CPU 的体系结构不同。For example, the architecture of mobile CPUs is different than the architecture of laptop or desktop CPUs. 如有疑问,最佳选择是在移动设备上实际运行页面。When in doubt, your best bet is to actually run your page on a mobile device. 当页面实际在移动设备上运行时,使用[远程调试] DevToolsRemoteDebugging 与计算机中的页面代码进行交互。Use Remote Debugging to interact with the code of a page from your machine while your page actually runs on a mobile device. 与代码交互时,可以进行查看、更改、调试、分析或全部四项操作。You may view, change, debug, profile, or all four while you interact with the code. 你的计算机可以是笔记本或台式计算机。Your machine may be a notebook or desktop computer.

模拟移动视区Simulate a mobile viewport

选择“切换设备仿真”\(切换设备工具栏\)或选择“自定义和控制DevTools”(...)>“设备仿真”,以打开用于模拟移动视区的 UI。Choose Toggle device emulation (Toggle Device Toolbar) or choose Customize and control DevTools (...) > Device emulation to open the UI that enables you to simulate a mobile viewport.

设备工具栏

默认情况下,设备工具栏在响应式视区模式下打开。By default the Device Toolbar opens in Responsive Viewport Mode.

响应式视区模式Responsive Viewport Mode

若要跨多个屏幕大小快速测试页面的外观,请拖动手柄以将视区调整为所需尺寸。To quickly test the look and feel of your page across multiple screen sizes, drag the handles to resize the viewport to your required dimensions. 还可以在“宽度”和“高度”框中输入特定值。You may also enter specific values in the width and height boxes. 在下图中,宽度设置为 626,高度设置为 516In the following figure, the width is set to 626 and the height is set to 516.

在响应式视区模式下更改视区尺寸的句柄

显示媒体查询Show media queries

如果已在页面上定义了媒体查询,请通过在视区上方显示媒体查询断点,跳至视区维度,使这些媒体查询生效。If you have defined media queries on your page, jump to the viewport dimensions where those media queries take effect by showing media query breakpoints above your viewport. 选择“更多选项” > “显示媒体查询”。Choose More options > Show media queries.

显示媒体查询

选择一个断点以更改视区的宽度,以便触发媒体查询。Choose a breakpoint to change the width of the viewport so that the media query gets triggered.

选择一个断点以更改视区的宽度

设置设备类型Set the device type

使用“设备类型”列表模拟移动设备或桌面设备。Use the Device Type list to simulate a mobile device or desktop device.

“设备类型”列表

下表介绍了可用设备类型选项之间的差异。The following table describes the differences between the available device type options. “渲染方法”列是指 Microsoft Edge 是将页面渲染为移动视区还是桌面视区。The Rendering method column refers to whether Microsoft Edge renders the page as a mobile or desktop viewport. “光标图标”列是指当你将鼠标悬停在页面上时所显示的光标类型。The Cursor icon column refers to what type of cursor is displayed when you hover on the page. “触发事件”列是指你与页面交互时页面是触发 touch 还是 click 事件。The Events triggered column refers to whether the page triggers touch or click events when you interact with the page.

选项Option 渲染方法Rendering method 光标图标Cursor icon 触发事件Events triggered
移动设备Mobile 移动设备Mobile 圆形Circle 触控touch
移动设备\(无触控\)Mobile (no touch) 移动设备Mobile 正常Normal 选择choose
桌面Desktop 桌面Desktop 正常Normal 选择choose
桌面\(触控\)Desktop (touch) 桌面Desktop 圆形Circle 触控touch

备注

如果未显示“设备类型”列表,请选择“更多选项” > “添加设备类型”。If the Device Type list is not displayed, choose More options > Add device type.

移动设备视区模式Mobile Device Viewport Mode

若要模拟特定移动设备的尺寸,请从“设备”列表中选择该设备。To simulate the dimensions of a specific mobile device, select the device from the Device list.

设备列表

将视区旋转为横向Rotate the viewport to landscape orientation

横向测试你的网页。Test your webpage in landscape orientation.

备注

如果“设备”工具栏较窄,将不显示“旋转”按钮。The Rotate button disappears if your Device Toolbar is narrow.

设备工具栏

有关详细信息,请导航到“设置方向”。For more information, navigate to Set orientation.

显示设备框架Show device frame

模拟特定移动设备(例如 iPhone 6)的尺寸时,在视区周围显示物理设备框架。Display the physical device frame around the viewport when you simulate the dimensions of a specific mobile device such as an iPhone 6.

  1. 打开“更多选项”。Open More options.
  2. 选择“显示设备框架”。Choose Show device frame.

备注

如果未显示特定设备的设备框架,则表示 DevTools 没有该选项的图片。If a device frame for a particular device is not displayed, it means that DevTools does not have art for the option.

添加自定义移动设备Add a custom mobile device

如果默认列表中未包含所需的移动设备选项,则可以添加自定义设备。If the mobile device option that you need is not included on the default list, you may add a custom device. 若要添加自定义设备,请完成以下步骤。To add a custom device, complete the following steps.

  1. 选择“设备”列表>“编辑”。Choose the Device list > Edit.

    选择“编辑”

  2. 选择“添加自定义设备”。Choose Add custom device.

  3. 在“仿真设备”上,输入自定义设备的设备名称、屏幕宽度和屏幕高度。On Emulated Devices, enter a device name, screen width, and screen height for the custom device. 设备像素比”、“用户代理字符串”和“设备类型”为可选字段。The device pixel ratio, user agent string, and device type fields are optional. 设备类型字段默认为“移动设备”。The device type field defaults to Mobile.

    创建自定义设备

显示标尺Show rulers

如果你需要测量屏幕尺寸,可以使用标尺测量屏幕大小(以像素为单位)。If you need to measure screen dimensions, you may use rulers to measure the screen size in pixels. 选择“更多选项” > “显示标尺”,以在视区的上方和左侧显示标尺。Choose More options > Show rulers to display rulers above and to the left of your viewport.

缩放视区Zoom the viewport

若要在多个缩放级别测试页面的外观,请使用“缩放”列表进行缩放。To test the look and feel of your page at multiple zoom levels, use the Zoom list to zoom in or out.

缩放

限制网络和 CPUThrottle the network and CPU

移动设备通常具有网络和 CPU 限制。Mobile devices often have network and CPU constraints. 确保测试页面加载的速度以及它在不同 Internet 和 CPU 速度下的响应速度。Ensure you test how quickly your page loads and how it responds at different internet and CPU speeds.

限制网络和 CPU。Throttle the network and CPU.

  1. 选择“限制”列表,将预设更改为“中层移动设备”或“低端移动设备”。Choose Throttle list and change the preset to Mid-tier mobile or Low-end mobile.
    • 中层移动设备”将模拟 fast 3G 并限制你的 CPU。Mid-tier mobile simulates fast 3G and throttles your CPU. 它是正常速度的 1/4。It is four times slower than normal.
    • 低端移动设备”将模拟 slow 3G 并限制你的 CPU。Low-end mobile simulates slow 3G and throttles your CPU. 它是正常速度的 1/6。It is six times slower than normal.

所有限制都基于笔记本电脑或桌面设备的正常功能。All of the throttling is based upon the normal capability of your laptop or desktop.

设备工具栏中的限制列表

备注

如果 “限制”列表处于隐藏状态,则表示设备工具栏过窄。If the Throttle list is hidden, your Device Toolbar is too narrow. 若要访问 “限制”列表,请增加设备工具栏的宽度。To access the Throttle list, increase the width of the Device Toolbar.

设备工具栏

仅限制 CPUThrottle the CPU only

若要仅限制 CPU 而不限制网络,请完成以下步骤。To throttle the CPU only and not the network, complete the following steps.

  1. 选择“性能”面板,然后选择“捕获设置”\(捕获设置\)。Choose the Performance panel, and choose Capture Settings (Capture Settings).

  2. 选择 CPU > 速度降低至 1/4**** 1/6Choose CPU > 4x slowdown or 6x slowdown.

    “性能”面板中的“CPU”列表

仅限制网络Throttle the network only

若要仅限制网络,请完成以下步骤。To throttle the network only, complete the following steps.

  1. 选择“网络”工具。Choose the Network tool.

  2. 选择“联机” > “快速 3G”或“慢速 3G”。Choose Online > Fast 3G or Slow 3G.

    “网络”面板中的“限制”列表

    或者选择Control+Shift+P(Windows, Linux) 或Command+Shift+P (macOS) 以打开命令菜单,键入 3G,然后选择启用快速 3G 限制启用慢速 3G 限制Or select Control+Shift+P (Windows, Linux) or Command+Shift+P (macOS) to open the Command Menu, type 3G, and choose Enable fast 3G throttling or Enable slow 3G throttling.

    命令菜单

还可以从“性能”面板设置网络限制。You may also set network throttling from the Performance panel.

  1. 选择“捕获设置”\(捕获设置\),然后选择“网络”列表,并将预设更改为“快速 3G”或“慢速 3G”。Choose Capture Settings (Capture Settings) and choose the Network list and change the preset to Fast 3G or Slow 3G.

    从“性能”面板设置网络限制

替代地理位置Override geolocation

如果页面依赖来自移动设备的地理位置信息来正确呈现,请使用替代地理位置的 UI 来提供不同的地理位置。If your page depends on geolocation information from a mobile device to render properly, provide different geolocations using the geolocation overriding UI.

  1. 选择“自定义和控制 DevTools”(...) >“更多工具” > “传感器”。Choose Customize and control DevTools (...) > More tools > Sensors.

地理位置传感器

  1. 打开命令菜单。Open the Command Menu.
  • 选择 Control + Shift + P (Windows、Linux) 或 Command + Shift + P (macOS)。Select Control+Shift+P (Windows, Linux) or Command+Shift+P (macOS).
  1. 键入 Sensors,然后选择“显示传感器”。Type Sensors, and choose Show Sensors.

针对地理位置显示传感器

在“传感器”面板上,可以使用“位置”下拉菜单选择 DevTools 中包含的预设位置之一。On the Sensors panel, you may select one of the preset locations included in DevTools using the Location drop-down menu. 若要输入自定义位置,请选择“其他...”,To enter a custom location, choose Other… 然后输入自定义位置的坐标。and enter the coordinates of your custom location. 若要在位置信息不可用时在错误状态下测试页面,请选择“位置不可用”。To test your page in an error state when location information is unavailable, choose Location unavailable.

已选择预设位置的“传感器”面板

设置方向Set orientation

如果页面依赖来自移动设备的方向信息来正确呈现,请打开方向 UI。If your page depends on orientation information from a mobile device to render properly, open the orientation UI.

  1. 选择“自定义和控制 DevTools”(...) >“更多工具” > “传感器”。Choose Customize and control DevTools (...) > More tools > Sensors.

方向传感器

  1. 打开命令菜单。Open the Command Menu.
  • 选择 Control + Shift + P (Windows、Linux) 或 Command + Shift + P (macOS)。Select Control+Shift+P (Windows, Linux) or Command+Shift+P (macOS).
  1. 键入 Sensors,然后选择“显示传感器”。Type Sensors, and choose Show Sensors.

针对方向显示传感器

在“传感器”面板上,可以从“方向”下拉菜单中选择预设方向。On the Sensors panel, you may select a preset orientation from the Orientation drop-down menu. 若要输入自己的方向,请选择“自定义方向”,然后输入自己的 alphabetagamma 值。To enter your own orientation, choose Custom orientation, and enter your own alpha, beta, and gamma values.

“传感器”面板上的方向选项

设置用户代理字符串Set user agent string

如果页面依赖移动设备中的用户代理字符串来正确呈现,请使用“网络条件”面板提供不同的用户代理字符串。If your page depends on the user agent string from a mobile device to render properly, use the Network conditions panel to provide different user agent strings.

  1. 选择“自定义和控制 DevTools”(...) >“更多工具” > “网络条件”。Choose Customize and control DevTools (...) > More tools > Network conditions.

“更多工具”菜单中的“网络条件”条目

  1. 打开命令菜单。Open the Command Menu.
  • 选择 Control + Shift + P (Windows、Linux) 或 Command + Shift + P (macOS)。Select Control+Shift+P (Windows, Linux) or Command+Shift+P (macOS).
  1. 键入 Network conditions,然后选择“显示网络条件”。Type Network conditions, and choose Show Network conditions.

显示网络条件

在“用户代理”旁边,清除“自动选择”复选框。Next to User agent, clear the Select automatically checkbox. 然后,选择“自定义...”,以从预定义的用户代理字符串列表中进行选择。Then, choose Custom... to select from a list of predefined user agent strings. 若要输入你自己的用户代理字符串,请在“输入自定义用户代理”中输入字符串。To enter your own user agent string, enter the string in Enter a custom user agent.

在 macOS 上,将用户代理字符串设置为 Microsoft Edge

联系 Microsoft Edge DevTools 团队Getting in touch with the Microsoft Edge DevTools team

使用以下选项讨论帖子中的新功能和更改,或与 DevTools 相关的任何其他内容。Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • 使用“发送反馈”图标发送反馈,或在 DevTools 中选择Alt+Shift+I \ (Windows、Linux) 或 Option+Shift+I \ (macOS)。Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • 发推 @EdgeDevToolsTweet at @EdgeDevTools.
  • 我们想要的 Web 提交建议。Submit a suggestion to The Web We Want.
  • 若要提交有关本文的错误,请使用以下“反馈” 部分。To file bugs about this article, use the following Feedback section.

Microsoft Edge DevTools 中的“发送反馈”图标

备注

此页面的某些部分是根据 Google 创建和共享的作品所做的修改,并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
原始页面位于此处,由 Kayce Basques\(Chrome DevTools & Lighthouse 的技术作家\)撰写。The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Creative Commons License
本作品根据 Creative Commons Attribution 4.0 International License 获得许可。This work is licensed under a Creative Commons Attribution 4.0 International License.