如何测试手机端网页

在我们工作过程中，常常会遇到在PC端开发适配各个尺寸的移动端设备。那么如何进行测试呢？下面我们列举几种常见方法。

chrome模拟器

利用我们伟大的Chrome浏览器的模拟手机屏幕。

然后我们通过左上角的Device进行选择我们所需测试的设备

此种方法虽然简便。但同时也存在诸多问题可信度50%，例如PC版的Chrome浏览器最小字体为12px，还有就是我们需要测试“多点触摸”时就无能为力了。

真机测试

1. 将文件传入各个设备中，利用实际的真机测试各个移动端的适配情况，这样的方法个人觉得适合最终版或者有较大改动时进行。否则在开发过程中我们不可能每写完一句代码就往设备中传一个吧。
2. 让你的PC机和设备，在一个局域网内（同一IP段），然后利用wamp开启一个服务，然后将文件放在www目录下。
3. 原理同上。browsersync软件开启一个服务，这个比较简单。
   首先，确保已安装nodejs（利用其中的包管理工具），然后输入命令安装 npm install -g browser-sync（如果安装慢可以选择用cnpm代替npm，具体怎么安装cnpm百度下即可），在全局中安装browsersync命令包。
   安装成功后我们就可以在想要测试的文件目录下，在DOS窗口或者git bash(安装git时赠送的)输入：browser-sync start --server --files "css/*.css, *.html"，即可开启服务，如下图：
   。
   这样我们就可以在移动设备中输入网址： http://192.168.1.102:3000/文件名.html ，进行测试了。
   需要注意的就是当我们目录下有index.html，开启browser-sync会默认给你引导到index.html。当我们此目录中有多个带侧文件，我们就需要在端口后加“/文件名.html”来指定我们要测试的页面