【亲测免费】 Mobile-Detect.js 教程

1. 项目目录结构及介绍

.
├── dist                    # 包含编译后的源代码
│   ├── mobile-detect.min.js  # 压缩版主文件
├── examples                # 示例代码目录
├── tests                   # 测试目录，包括SpecRunner.html
├── src                     # 源代码目录
│   └── mobile-detect.js     # 主要源代码文件
└── package.json            # npm包配置文件

• dist: 包含已编译和压缩的可部署版本。
• examples: 提供了使用Mobile-Detect.js的基本示例。
• tests: 测试用例和测试运行器，帮助验证库的功能。
• src: 存放原始未处理的JavaScript源码。
• package.json: npm项目配置，用于管理和依赖。

2. 项目启动文件介绍

Mobile-Detect.js 的主要文件是 src/mobile-detect.js 和其压缩版本 dist/mobile-detect.min.js。在HTML文件中，你可以通过引入这个文件来使用库：

<script src="path/to/mobile-detect.min.js"></script>

一旦引入，全局对象 MobileDetect 就会被创建，你可以使用这个对象来进行设备检测。

例如:

var md = new MobileDetect(window.navigator.userAgent);
console.log(md.is('Phone')); // 检查是否是手机

3. 项目的配置文件介绍

Mobile-Detect.js 不依赖任何外部配置文件。它的功能和行为是由源代码中的正则表达式和内置方法定义的。但是，如果你想要自定义或扩展库的功能，可以考虑以下两种方式：

• 继承：你可以创建一个新的构造函数，继承自 MobileDetect，然后添加自己的方法或覆盖现有的方法。
• 组合：将 MobileDetect 对象与其他工具结合使用，比如Modernizr，以检测特定的功能而非仅仅依赖设备类型。

例如，若要扩展库以检测更多设备类型，你可以这样做：

function CustomMobileDetect userAgent){
    MobileDetect.call(this, userAgent);
    // 添加自定义方法
    this.is('MyDevice') = function() { ... };
}

CustomMobileDetect.prototype = Object.create(MobileDetect.prototype);
CustomMobileDetect.prototype.constructor = CustomMobileDetect;

var myDetector = new CustomMobileDetect(navigator.userAgent);
console.log(myDetector.is('MyDevice'));

请注意，尽管Mobile-Detect.js本身没有配置文件，但你可以在你的项目中创建一个配置文件来管理如何加载和设置这个库，特别是在使用构建系统如Webpack或Gulp的时候。

---

完成这些步骤后，你应该可以成功地将Mobile-Detect.js集成进你的项目中，开始进行设备检测了。记得定期查看项目的GitHub页面以获取最新更新和补丁。