Question

我正在寻求建立一个新网站，并希望采取负责任的“移动优先”方法。这种方法的一个原则是只加载你需要的东西，并避免包含大量浪费的库和框架，直到你真正需要它们为止。

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

在javascript方面，我真的很想使用像zepto.js（http://zeptojs.com/）这样的东西，这是一个小巧的javascript库（2-5k），针对移动webkit（和单独的移动webkit）进行了优化一个jquery兼容的语法。它也被设计为具有全开jquery的“热插拔”。所以我的策略是（伪代码）：

测试移动网络套件
如果（true）加载zepto.js
if（false）load jquery

但现在我的问题是：你们建议用什么（未来证明）技术来检测移动webkit，最好是以纯粹的javascript方式（不使用jquery，插件或其他库）并且可以与{{3}集成}？

Answer 1

好的，所以我猜我的问题措辞不够或者说有些东西，但是我会找到一个可以接受的解决方案与我的用例一起使用。

// 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标签（或'no-webkit'和'no-mobile'，如果为false），但也允许你有条件地加载你喜欢的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，如有必要。由于语法非常相似，无论最终加载哪个框架，插件和其他脚本都可能仍然有效。

Answer 2

吉尔列斯夫的回答几乎是现实的。但是，我发现Regex没有检测Android 2.2上的Webkit浏览器。 2.3（Froyo＆amp; Gingerbread）。 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);
});

如何测试移动webkit

2 个答案: