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 回答