6

我正在寻找建立一个新网站，并希望采取负责任的“移动优先”方法。这种方法的一个原则是只加载您需要的内容，并避免在您真正需要它们之前包含大型浪费的库和框架。

为此，我打算使用modernizr2来​​测试功能，然后只加载所需的文件和库。

在 javascript 方面，我真的对使用像 zepto.js ( http://zeptojs.com/ ) 这样的东西很感兴趣，它是一个小型 javascript 库 (2-5k)，针对移动 webkit（和单独的移动 webkit）进行了优化，同时维护一个 jquery 兼容的语法。它还被设计为可与完整的 jquery 一起“热交换”。所以我的策略是（在伪代码中）：

  • 测试移动 webkit
  • 如果（真）加载zepto.js
  • if(false) 加载 jquery

但现在我的问题是：你们会推荐什么（面向未来的）技术来检测移动 webkit，最好以纯 JavaScript 方式（不使用 jquery、插件或其他库）并且可以与modernizr 的测试 API集成？

4

2 回答 2

11

好的，所以我想我的问题措辞不佳或其他什么，但稍微挖掘了一下，我找到了一个可以接受的解决方案，适用于我的用例。

// Webkit detection script
Modernizr.addTest('webkit', function(){
return RegExp(" AppleWebKit/").test(navigator.userAgent);
});

// Mobile Webkit
Modernizr.addTest('mobile', function(){
return RegExp(" Mobile/").test(navigator.userAgent);
});

这两个测试会将 'webkit' 和 'mobile' 类添加到您的 html 标记（如果为 false，则添加 'no-webkit' 和 'no-mobile'），但也允许您有条件地加载您喜欢的 javascript 库，具体取决于情况。

就我而言，在 JQuery 或 Zepto.js 之间切换：

Modernizr.load([
            // test mobile webkit (zepto or jquery?)
            {
                test: Modernizr.webkit && Modernizr.mobile,
                nope: ['//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js'],
                yep: [baseURL + 'js/lib/zepto.min.js']
            }]);

因此，当我检测到访问者正在使用移动 webkit 浏览器（这可能就像 100% 的 iOS 或 Android 设备一样）时，我可以为他们节省大量开销，并在必要时为其他所有人加载常规 JQuery。由于语法非常相似，因此无论最终加载哪个框架，插件和其他脚本都可能仍然有效。

于 2011-07-06T07:44:49.857 回答
2

gillesv 的回答几乎是准确的。但是，我发现 Regex 没有检测到 Android 2.2 和 2.3（Froyo 和 Gingerbread）上的 Webkit 浏览器。userAgent 确实包含短语“AppleWebkit”和“Mobile”，但末尾没有正斜杠。

如下修改代码对我有用：

// Webkit detection script
Modernizr.addTest('webkit', function(){
  return RegExp(" AppleWebKit").test(navigator.userAgent);
});

// Mobile Webkit
Modernizr.addTest('mobile', function(){
  return RegExp(" Mobile").test(navigator.userAgent);
});
于 2013-01-14T19:58:10.100 回答