我们想要的效果是pc文件和mobile文件统一入口，适配不同的设备。
先看看项目的目录：
在index.html里面配置js控制选择那一个文件夹下的文件就可以了。
我们要利用：Navigator 对象，Navigator 对象包含有关浏览器的信息。
index.html很简单，直接上码吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<scrip
在网页开发中，为了提供更好的用户体验，经常需要根据用户访问设备的不同来调整页面展示方式，例如，当用户使用手机访问时展示移动版页面，而使用电脑访问时展示桌面版页面。这一过程通常被称为响应式设计或者设备适配。本文将详细讲解如何使用JavaScript的Navigator对象来判断页面是在手机端还是在PC端打开，并给出相应的代码实现。
我们需要了解`navigator`对象。在JavaScript中，`navigator`对象是全局对象的一个属性，它提供了关于浏览器的信息。这个对象包含了诸如浏览器名称、版本、用户的操作系统等大量信息，可以用来识别用户使用的设备类型。
要判断页面是在手机端还是PC端，我们主要关注`navigator.userAgent`属性。`userAgent`是一个字符串，它包含了浏览器的详细信息，包括浏览器名称、版本以及设备信息。通过分析这个字符串，我们可以识别出用户是用什么设备访问的页面。
以下是一个简单的示例代码，用于判断用户设备：
```javascript
function browserRedirect() {
var sUserAgent = navigator.userAgent.toLowerCase();
// 使用正则表达式匹配设备类型
if (/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(sUserAgent)) {
// 如果是手机设备，跳转到移动端页面
window.location.href = "http://f.jcngame.com/fanfan20171208/mobile/index.html";
} else {
// 否则，跳转到PC端页面
window.location.href = "http://f.jcngame.com/fanfan20171208/fanmai/index.html";
}
}
// 调用函数进行设备判断和页面跳转
browserRedirect();
```
在这个示例中，我们创建了一个名为`browserRedirect`的函数，该函数首先获取`navigator.userAgent`的值并转换为小写，然后使用正则表达式检查这个字符串是否包含特定的设备标识符。如果检测到的是手机设备，那么将页面重定向至移动端页面；否则，跳转至PC端页面。
需要注意的是，这种方法并不完全准确，因为有些浏览器可能会伪造`userAgent`字符串。此外，随着新的设备和浏览器的出现，可能需要不断更新正则表达式以覆盖所有情况。为了更优雅地处理设备适配，可以考虑使用媒体查询（Media Queries）结合CSS来实现响应式布局，或者使用现代化的前端框架，如Bootstrap或Vue.js，它们都内置了很好的设备适配功能。
使用JavaScript的`navigator`对象判断设备类型是一种常见的实践，但随着技术的发展，更推荐使用现代的响应式设计方法来实现跨设备的兼容性。同时，为了提高用户体验，建议在重定向前先检测用户是否已经明确选择了偏好，避免不必要的页面跳转。
