2.2 PC浏览器中模拟移动开发与测试

为了提高开发效率，必须有代码的测试工具，这样的测试工具也有很多，如Opera Mobile移动端测试工具、浏览器自带的移动端测试工具等。本节以Chrome浏览器为主进行介绍。Chrome浏览器模拟了主流的手机，并且引擎是Webkit。对于Chrome浏览器，Mobile Emulation（移动测试模拟器）是在Chrome 32版本之后才有的，笔者使用的是Chrome 53版本，并建议把浏览器升级为最新版本。

1.启动模拟器

打开Chrome浏览器，在地址栏中输入http://www.baidu.com，按〈F12〉键，进入开发者工具界面，如图2-3所示。

图2-3 Chrome开发模式界面

整个页面分为左右两个区域，左侧为内容模拟显示区域，右侧是模拟控制区域，图2-3中1所指为Responsive的下拉列表框，可以选择移动端设备的型号，如iPhone 5、iPhone 6Plus、Galaxy S5、Nexus 5X和iPad等，如果在下拉列表框中没有要选择的设备型号，可以选择Edit选项，进入Settings Emulated Devices界面，添加相应型号的设备。图2-3中2所指图标为More options按钮，可以对模拟显示区域进行设置，图2-3中3所指为Customize and Control DevTools按钮，它是用来对模拟控制区域进行设置的。

2.运行实例代码

在文本编辑器中输入下列代码，以first.html为文件名进行保存，并在Chrome浏览器中打开。

显示结果如图2-4所示。

图2-4 Chrome代码演示