如何测试移动 webkit

Posted 2023-02-22

【中文标题】如何测试移动 webkit

【英文标题】：How to test for mobile webkit

【发布时间】：2011-09-28 14:58:23

【问题描述】：

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

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

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

移动 webkit 测试 If(true) 加载 zepto.js if(false) 加载 jquery

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

【问题讨论】：

另一种方法是“CSS3 媒体查询”尝试用谷歌搜索它并进一步理解它，它确实是移动网络的东西，你可以在没有任何库的情况下做你不会做的事情:)

是的，我非常了解媒体查询并且过去使用过它们，但媒体查询检测屏幕尺寸，不一定是设备/浏览器。我正在寻找专门针对移动 webkit。

developer.apple.com/internet/webcontent/objectdetection.html 这有什么兴趣吗？

不，因为如果我想进行功能测试，我可以使用modernizr（我已经这样做了）但是如果我们谈论使用替代javascript库，功能测试只会让你到目前为止.我应该测试多少功能以确定我仍在使用移动 webkit 浏览器并使用 zepto.js？尤其是当您考虑到 Mac 上的桌面浏览器变得越来越具有触控功能时。

【参考方案1】：

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);
);

【参考方案2】：

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

// 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，如有必要。由于语法非常相似，因此无论最终加载哪个框架，插件和其他脚本都可能仍然有效。