如何在 PC 上切换到智能手机视图 – Chrome Edge Firefox
本文推荐给以下人群：
- 想要使用 Chrome 将网站切换到智能手机显示的用户
- 想要使用 Microsoft Edge 将网站切换到智能手机显示的用户
- 想要使用 Firefox 将网站切换到智能手机显示的用户
在本文中，我们将详细说明如何使用 PC 浏览器打开智能手机页面。
这是任何运行网站的人都应该牢记的功能。
目录
我们将详细说明如何使用据说拥有最多用户的 Google Chrome 将您在 PC 上查看的网站切换到智能手机显示屏。
步按键盘上的 F12 打开开发者工具
使用 Google Chrome 作为活动窗口，键盘F12请按
活动窗口是显示在PC屏幕最前面并且可以操作的窗口。
反之，显示在前面以外的位置且无法操作的窗口称为非活动窗口。
键盘F12当您按 时，开发者工具将在 Google Chrome 右侧打开，如下图所示。
键盘快捷键：按 F12 或 Ctrl + Shift + I（在 Mac 上按 Command + Option + I）。
下图中红框包围的区域就是开发者工具。
开发者工具是一项可让您轻松分析网站内容和资源的功能。
按键盘上的 F12 打开开发者工具
步单击开发者工具中的手机图标切换到手机视图
开发者工具打开后，在开发者工具的左上角单击描绘智能手机和平板电脑的图标请。
单击后，左侧屏幕将切换为智能手机显示，如红框所示。
当前分辨率显示在其上方的蓝色框中，在下图中，它看起来像 460 x 1213。
这里显示的数字是点（CSS 像素）。
请注意，1pt 是 1 英寸的 1/72，这与像素完全不同。
单击开发人员工具的智能手机图标
再次单击带有智能手机和平板电脑图表的图标可返回 PC 显示屏。
选择设备并更改显示尺寸
在开发者工具中，根据设备（型号）提前准备好尺寸（点），还可以检查诸如“在iPhone 12 Pro上将如何显示？”之类的内容。
截至 2024 年 6 月 26 日，它还兼容 iPhone 14 Pro Max 和 Galaxy S20 Ultra 等设备。
在开发者工具中切换到智能手机视图后，在左上角单击[尺寸：响应式]请。
当您单击[Dimensions: Responsive]时，下拉菜单将向底部展开。
在展开的菜单中，将显示各种型号名称，从 Android 终端到 iPhone 和 iPad，因此请选择您要检查的设备（型号）。
屏幕尺寸将根据所选设备（型号）进行调整。
选择设备并更改显示分辨率
如果您要查看的设备（型号）不在该下拉菜单中，请单击下拉菜单底部的按钮。单击编辑请。
选择设备并更改显示分辨率
单击“编辑”，您将在屏幕左侧看到“模拟设备”。
其中，展示了许多此前未展示的设备（型号）。
选择设备并更改显示分辨率
显示在“模拟设备”中检查设备名称（型号名称）该模型将添加到左侧的尺寸中。
在下图中，检查并添加了 iPhone X。
选择设备并更改显示分辨率
现在您可以检查 iPhone X 的屏幕显示。
如果您要选择的型号在仿真设备中不可用
如果您要选择的型号在仿真设备中不可用，单击添加自定义设备然后您就可以注册了。
在红框中输入需要的项目，点击Add进行添加。
如果您要选择的型号在仿真设备中不可用
有关 iPhone 屏幕尺寸（CSS 像素）的信息，请参阅以下网站。
吃
iPhone 屏幕尺寸和像素数快速参考表 – Qiita
*截至2023年7月31日更新至iOS16.6 我们正在招募！ GENZ Co., Ltd.提供软件测试服务。我们还正在招聘职业生涯中期...
如何将 Chrome 开发者工具本地化为日语
Chrome 的开发者工具默认设置为英语，但您可以按照以下步骤更改设置，轻松将其更改为日语。
- 单击开发者工具右上角的齿轮图标
- 语言选择[日语-日语]
- 滚动到底部并单击“恢复默认值并重新加载”
- 点击“始终匹配 Chrome 的语言”
从这里开始，我将用易于理解的方式解释如何使用实际屏幕将 Chrome 的开发者工具本地化为日语。
步单击开发者工具右上角的齿轮图标
一、在开发者工具右上角单击齿轮图标请。
如何将 Chrome 开发者工具本地化为日语
步语言选择[日语-日语]
当您单击齿轮图标时，带有大文本设置的开发者工具设置屏幕将出现在Chrome右侧。
里面的语言里选择[日语-日语]请。
如何将 Chrome 开发者工具本地化为日语
步滚动到底部并单击“恢复默认值并重新加载”
选择【日语-日语】后，滚动到底部并选择单击恢复默认值并重新加载请。
如何将 Chrome 开发者工具本地化为日语
步点击“始终匹配 Chrome 的语言”
当您点击“恢复默认值并重新加载”时，屏幕将刷新，您将在右侧看到三个选项：“始终匹配 Chrome 的语言”、“将 DevTools 切换为日语”和“不再显示”。
如果您使用日语版本的 Chrome点击“始终匹配 Chrome 的语言”请。
如果您使用日语以外的语言使用 Chrome，请单击 [将开发工具切换为日语] 将开发者工具本地化为日语。
如何将 Chrome 开发者工具本地化为日语
步确认开发者工具已本地化为日语
当您点击[始终匹配 Chrome 的语言]时，屏幕将更新，开发者工具将本地化为日语，如下图所示。
如何将 Chrome 开发者工具本地化为日语
如何使用 Microsoft Edge 将网站切换到智能手机视图
接下来，我们将详细介绍如何使用 Microsoft Edge 将您在 PC 上查看的网站切换到智能手机视图。
步按键盘上的 F12 打开 DevTools
使用 Microsoft Edge 作为活动窗口，键盘F12请按
活动窗口是显示在PC屏幕最前面并且可以操作的窗口。
反之，显示在前面以外的位置且无法操作的窗口称为非活动窗口。
按键盘上的 F12 打开 DevTools
键盘F12当您按下 时，Microsoft Edge 右侧会出现一个屏幕，显示“您要打开 Microsoft Edge 开发人员工具吗？”
它在底部单击打开开发工具请。
为了防止下次出现此消息，请选中“记住我的决定”并单击“打开 DevTools”。
按键盘上的 F12 打开 DevTools
步单击 DevTools 智能手机图标切换到智能手机视图
当您单击“打开 DevTools”时，Microsoft Edge 右侧将出现一个屏幕，显示“欢迎使用 Microsoft Edge DevTools”。
这是最重要的单击智能手机和平板电脑图标请。
当你点击它时，左侧的屏幕将切换到智能手机显示，就像鱿鱼图像中的红框一样。
当前分辨率显示在其上方的蓝色框中，在下图中，它看起来像 599 x 458。
这里显示的数字是点（CSS 像素）。
请注意，1pt 是 1 英寸的 1/72，这与像素完全不同。
单击 DevTools 智能手机图标
选择设备并更改显示尺寸
在 Microsoft Edge 的 DevTools 中，根据设备（型号）提前准备好尺寸（点），您还可以检查诸如“它将如何在 iPhone 12 Pro 上显示？”之类的内容。
截至 2024 年 6 月 26 日，它还兼容 iPhone 14 Pro Max 和 Galaxy S20 Ultra 等设备。
在开发者工具中切换到智能手机视图后，在左上角点击维度：响应式请。
当您单击[维度：响应式]时，下拉菜单将向底部展开。
在展开的菜单中，将显示各种型号名称，从 Android 终端到 iPhone 和 iPad，因此请选择您要检查的设备（型号）。屏幕尺寸将根据所选设备（型号）进行调整。
选择设备并更改显示尺寸
如果您要查看的设备（型号）不在该下拉菜单中，请单击下拉菜单底部的按钮。单击编辑请。
选择设备并更改显示尺寸
单击【编辑】后，Microsoft Edge 右侧将显示下图中红框包围的“模拟设备”列表。
其中，展示了许多此前未展示的设备（型号）。
选择设备并更改显示尺寸
如果检查“模拟设备”中显示的设备名称（型号名称），该型号将被添加到左侧的[Dimension: Responsive]中。
在下图中，检查并添加了 iPhone X。
选择设备并更改显示尺寸
现在您可以检查 iPhone X 屏幕尺寸的显示。
如果在仿真设备中没有找到您要选择的型号
如果仿真设备中没有您要选择的型号，您可以通过点击【添加自定义设备】进行注册。
在红框中输入需要的项目，点击Add进行添加。
如果您要选择的型号在仿真设备中不可用
有关 iPhone 屏幕尺寸（CSS 像素）的信息，请参阅以下网站。
吃
iPhone 屏幕尺寸和像素数快速参考表 – Qiita
*截至2023年7月31日更新至iOS16.6 我们正在招募！ GENZ Co., Ltd.提供软件测试服务。我们还正在招聘职业生涯中期...
如何使用 Firefox 将网站切换到移动视图
接下来，我们将详细说明如何使用 Firefox 将网站切换到智能手机视图。
步按键盘上的 F12 打开开发者工具屏幕
以 Firefox 作为活动窗口，键盘F12请按
活动窗口是显示在PC屏幕最前面并且可以操作的窗口。
反之，显示在前面以外的位置且无法操作的窗口称为非活动窗口。
按键盘上的 F12 打开开发者工具屏幕
步单击开发工具中的智能手机图标，切换到智能手机视图。
当您按下键盘上的 F12 键时，开发人员工具将出现在 Firefox 屏幕的下半部分。
开发者工具右侧单击智能手机和平板电脑图标（响应式设计模式）请。
键盘控制键+转移+中号您还可以通过按 切换到响应式设计模式。
单击开发工具中的智能手机图标，切换到智能手机视图。
单击后，左侧屏幕将切换为智能手机显示，如红框所示。
当前分辨率显示在其上方的蓝色框中，在下图中，它看起来像 320 x 480。
这里显示的数字是点（CSS 像素）。
请注意，1pt 是 1 英寸的 1/72，这与像素完全不同。
单击开发工具中的智能手机图标，切换到智能手机视图。
如果开发工具画面难以使用
Firefox 开发者工具屏幕的顶部是屏幕显示，底部是开发工具。
在智能手机上观看时，通常是垂直方向，因此在这种状态下可能很难看清。
在这种情况下，您可以通过单击开发工具右下角的[三点引线]来更改显示。
如果开发工具画面难以使用
选择设备并更改显示尺寸
Firefox开发工具有根据设备（型号）提前准备好的尺寸（点），还可以检查诸如“在iPhone 12 Pro上将如何显示？”之类的内容。
在开发工具中切换到智能手机显示后，在左上角点击【回复】请。
当您单击[响应式]时，下拉菜单将向底部展开。
在展开的菜单中，将显示各种型号名称，从 Android 终端到 iPhone 和 iPad，因此请选择您要检查的设备（型号）。屏幕尺寸将根据所选设备（型号）进行调整。
选择设备并更改显示尺寸
如果您要查看的设备（型号）不在该下拉菜单中，请单击下拉菜单底部的按钮。单击编辑列表请。
选择设备并更改显示尺寸
单击[编辑列表]可显示在 Firefox 中注册的设备（型号）列表。
其中，展示了许多此前未展示的设备（型号）。
选择设备并更改显示尺寸
显示的检查设备名称（型号名称）请。
选择设备并更改显示尺寸
选中后，模型将添加到下拉菜单中。
推荐阅读：Google Analytics – 将我排除在访问之外 禁用数据收集的附加组件 – Chrome – Firefox – Internet Explorer – Safari
选择设备并更改显示尺寸
您现在可以检查您检查的设备（型号）的屏幕尺寸。
常问问题
即使切换到设备模式后，屏幕也无法正常显示。
如果切换到设备模式后屏幕仍无法正常显示，请转动屏幕F5请尝试重新加载。
有没有办法同时查看网页在哪些设备上的外观？
通过打开多个浏览器窗口或选项卡并在不同的设备模式下查看它们，您可以同时查看它在多个设备上的外观。
有没有办法在设备模式下的智能手机上的纵向和横向显示之间切换？
在设备模式下单击屏幕顶部的旋转图标可在纵向和横向显示之间切换。
如何在设备模式下清除缓存？
您可以通过单击开发人员工具顶部的 [>>]，选择“网络”选项卡并选中“禁用缓存”来禁用页面重新加载时的缓存。
有没有办法改变设备模式下网页的显示放大倍数？
您可以在设备模式下使用屏幕顶部的缩放控件（例如 100%）更改显示放大倍率。
我可以在设备模式下进行网站速度测试吗？
点击开发者工具顶部>>，选择网络选项卡，点击Wifi图标（其他网络状态）。
您可以通过网络状态中的【网络限制】预设高速3G、低速3G等网络条件。
每次我错误地按 F12 时，开发人员工具都会打开，这很烦人。有办法禁用它吗？
无法从浏览器禁用开发人员工具。
如何禁用 NumLock 和 Insert 键我们建议使用 中介绍的方法禁用 F12 键本身。
有关 Google Chrome、Microsoft Edge 和 Firefox 的其他文章
单击此处查看有关 Google Chrome、Microsoft Edge 和 Firefox 的其他文章。请看一下。
