6

新しいウェブサイトの構築を検討しており、責任ある「モバイル ファースト」のアプローチを取りたいと考えています。この方法論の信条の 1 つは、必要なものだけをロードし、実際に必要になるまで大規模で無駄なライブラリやフレームワークを含めないようにすることです。

このために、 modernizr2を使用して機能をテストし、必要なファイルとライブラリのみをロードするつもりです。

JavaScript 側では、維持しながらモバイル Webkit (およびモバイル Webkit のみ) 用に最適化された小さな JavaScript ライブラリ (2-5k) であるzepto.js ( http://zeptojs.com/ )のようなものを使用することに本当に興味があります。 jquery 互換の構文。また、完全な jquery で「ホットスワップ可能」になるように設計されています。だから私の戦略は（疑似コードで）です：

  • モバイル Webkit のテスト
  • If(true) 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);
});

これらの 2 つのテストは、'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 の答えはほぼ的を射ています。ただし、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 に答える