如何测试移动webkit [英] How to test for mobile webkit

问题描述

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

I'm looking to build a new website and want to take a responsible "mobile-first" approach. One tenet of this methodology is to only load what you need, and to avoid including large wasteful libraries and frameworks until you actually need them.

为此我打算用< a href =http://www.modernizr.com/ =noreferrer> modernizr2 来测试功能，然后只加载所需的文件和库。

For this I intend to use modernizr2 to test for features and then load only required files and libraries.

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

On the javascript side, I'm really interested in using something like zepto.js (http://zeptojs.com/) which is a tiny javascript library (2-5k) optimized for mobile webkit (and mobile webkit alone) while maintaining a jquery compatible syntax. It's also been designed to be "hot-swappable" with full-on jquery. So my strategy is (in pseudo-code):

• 测试移动webkit


• 如果（ true）load zepto.js


• if（false）load jquery

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

But now my question is: what (future proof) technique would you guys recommend for detecting mobile webkit, preferably in a pure javascript way (without using jquery, plugins or other libraries) and that could be integrated with modernizr's testing API?

推荐答案

好的，所以我想我的问题是措辞不好或者其他什么，但是有点挖掘，我找到了一个可以接受的解决方案，与我的用例一起使用。

Okay, so I guess my question was poorly worded or something, but a little digging around and I've found an acceptable solution that works with my use-case.

// 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库，具体取决于具体情况。

These two tests will add both the 'webkit' and 'mobile' classes to your html tag (or 'no-webkit' and 'no-mobile' if false) but will also allow you to conditionally load your preferred javascript library, depending on the situation.

在我的情况下要么在JQuery或Zepto.js之间切换：

In my case either toggling between JQuery or 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']
            }]);

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

So when I detect a visitor is using a mobile-webkit browser (which is probably like 100% of iOS or Android devices out there), I can save them a considerable amount of overhead, and load regular JQuery for everyone else, if necessary. Since the syntax is so similar, plugins and other scripts will likely still work regardless of which framework ends up being loaded.

这篇关于如何测试移动webkit的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！