本文共 611 字，大约阅读时间需要 2 分钟。

手机站开发过程中，有些条件下我们无从知道开发的前端在不同手机上的展示，还好chrome为我们准备了非常好的工具，

这里做下普及，

首先，作为前端开发人员，用右键，用“审查元素” 查看每个单元的源码情况。

点“sources”面板

然后再按“ESC”，看到如下窗口：

在“Device”后面的下拉框有一系列的设备，基本上大部分主流的机型有了，但是国产机子很少，操他的美国佬。

选择“Apple5”，能看到下图：

下图两个按键“Emulate”和“reset”分别是进行模拟和取消模拟。

如果想要彻底关闭模拟器窗口，再按一次“ESC”即可。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

简单说：

如何模拟手机设备

在PC上模拟手机的环境

需要Chrome浏览器版本在32以上

1、右键，审查元素

2、点击show drawer图标（在小齿轮左边），drawer意思是抽屉

3、打开模拟功能:show ‘Emulation’ view in console drawer 确保前面的钩钩，√状态

4、选择你想要模拟的设备，点击Emulate按钮