如何測試移動webkit

我期待建立一個新的網站，並希望採取負責任的「移動優先」的方法。這種方法的一個原則是隻加載你需要的東西，並避免包含大量浪費的庫和框架，直到你真正需要它們。如何測試移動webkit

爲此，我打算使用modernizr2來測試功能，然後只加載所需的文件和庫。在JavaScript方面，我真的很喜歡使用像zepto.js（http://zeptojs.com/）這是一個小的JavaScript庫（2-5K），針對移動webkit（和移動webkit單獨）進行了優化，同時保持jquery兼容句法。它也被設計成具有全功能jquery的「熱插拔」。所以我的策略是（僞代碼）：手機webkit的

測試
如果（真）負載zepto.js
如果（假）負荷的jQuery

但現在我的問題是：你會推薦什麼（未來證明）技術來檢測移動webkit，最好以純JavaScript方式（不使用jquery，插件或其他庫），並可以與modernizr's testing API集成？

來源

2011-07-05 gillesv

另一種方式是「CSS3媒體查詢」嘗試谷歌它，瞭解它升技更真的是什麼，移動網絡，你可以做你不會有任何庫:) – Val

是的我很瞭解媒體查詢，並在過去使用它們，但媒體查詢檢測屏幕尺寸，不一定是設備/瀏覽器。我正在專門針對移動webkit。 – gillesv

http://developer.apple.com/internet/webcontent/objectdetection.html這會有什麼好處嗎？ – Val

好的，所以我想我的問題沒有措辭或什麼，但有點挖掘，我發現一個可接受的解決方案，與我的用例。

// 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」和「移動」類你的HTML標籤（或「無WebKit的」和「無移動」如果假的），而且還可以讓你有條件負載您首選的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瀏覽器（這是iOS或Android設備可能像100％在那裏），我可以爲他們節省大量開銷，並在必要時爲其他人加載常規JQuery。由於語法非常相似，無論哪個框架最終被加載，插件和其他腳本都可能仍然有效。

來源

2011-07-06 07:44:49 gillesv

gillesv的回答幾乎是現貨。然而，我發現正則表達式不檢測Android 2.2上的Webkit瀏覽器。2.3（Froyo & 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); 
});

來源

2013-01-14 19:58:10 Howie

如何測試移動webkit

回答

相關問題