在移动设备上调试响应式设计时如何启用垂直滚动条？

Question

Mac + Chrome 101 版本

在下面的情况下，如何启用垂直滚动条，否则我无法查看手机屏幕的底部。

这是错误还是我缺少某些设置？

Answer 1

通常，当您将网站模拟为桌面上的移动设备时，期望您使用 鼠标滚轮 或 触控板上的两指拖动手势 来模拟 屏幕滑动手势 在真实的移动设备上。

不过，有一种方法可以永久显示滚动条：

打开右上角的三点菜单，然后单击“添加设备类型”。这将在工具栏中显示一个新的下拉菜单。 （标签可能是 Mobile。）打开下拉菜单并选择 Desktop。这将显示滚动条。

备注：

1. 确保您已在 macOS 系统设置中启用“滚动条行为”或“显示滚动条”设置的“始终”，否则滚动条即使在 桌面上也不会显示类型。

2. 在Dimensions菜单中，如果您想自由更改设备类型，则应选择“响应式”。如果您选择固定设备，设备类型下拉列表将锁定到该设备并被禁用。

3. 您可能需要向设备宽度添加一些像素以补偿永久滚动条。在 macOS 上，该值通常为 15 像素。

额外提示： 正如您在下面看到的，我还启用了媒体查询和规则的显示。如果您正在调试响应式网站，它可能对您非常有用。它们也在同一个菜单上。