如何使移动端和pc端加载不同页面

如下面图中所示，我先在data目录下创建两个目录web和phone，分别来放电脑端和手机端的文件内容。

这两个目录是用来测试的，所以都放了一个index.html文件，文件的内容分别是：电脑端：This is a computer page手机端：This is a phone page

目录配置好以后，来修改nginx 的配置文件，我先用nginx基于主机名的虚拟主机来实现这种配置。如下面图中所示，我创建两个虚拟主机，监听的域名分别是www 和 m 开头的测试域名。www对应的数据目录就是/data/web，而m开头的域名对应的目录就是/data/phone。

配置好以后，为了在自己的电脑上测试，在hosts文件里，将这两个域名都对应到同一个IP地址上，内容如下所示：

然后对nginx的配置文件使用命令nginx -t进行测试，测试正常后，使用nginx命令启动服务器。

然后在本地的电脑上使用浏览器分别访问两个域名，结果如下所示，可以看到m开头的域名对应的是手机端，显示的内容是This is phone page，然后www开头的域名对应的是电脑端，显示的内容是This is a web page。这样就实现了手机端和电脑端的内容分开。这样只需要在手机客户端上设置它的访问地址是m开头的域名，然后www开头的域名作为电脑访问的域名，即可实现内容分开。

最后，还可以通过基于IP的虚拟机主机来实现，配置如下面图中所示，两个目录对应不同的IP地址，然后将手机客户端的访问地址设置为/data/phone目录对应的IP地址，将桌面端访问的地址设置为/data/web目录对应的地址即可。但是这里还涉及到域名指向问题，配置比域名的稍微麻烦一点。