如何用谷歌浏览器Device Mode模拟移动设备调试网站？

更新于 2020-10-16 18:29:01首发于 2019-01-15 12:03:07556

经常有站长问到手机访问网站无法调试，那么应该如何查看移动端网站的实际效果并进行调试等问题，其实这个完全可以使用 PC 端浏览器自带的 Device Mode 模拟移动设备访问网站移动端效果并进行调试。今天就以谷歌浏览器 Chrome为例简单说明一下基本操作。

注意：Device Mode 模拟移动设备可以让我们了解网站在移动设备上的显示的大体效果，但要获得全面、真实的效果，还是应该在真实的移动设备上测试网站。

打开或关闭 Device Mode 步骤

1、用谷歌浏览器 Chrome 打开目标网站，如 boke112 导航，右键该网站页面，在弹出的菜单中点击“检查”。具体如下图所示：

2、在弹出的 DevTools 中点击左侧第二个图标，如下图箭头所示的图标即可开启 Device Mode。当然，你也可以通过使用 Command+Shift+M（Mac）或 Ctrl+Shift+M（Windows、Linux）快捷键来打开或关闭 Device Mode。

3、开启 Device Mode 之后可以点击顶端不同的移动设备和显示的比例，如果列表中没有想要的移动设备，我们还可以点击第一个选项“Responsive”然后输入不同的尺寸来调试即可。具体如下图所示：