2

jQuery Backstrechプラグインを使用して、レスポンシブWebサイトにフルサイズの背景画像を実装しています。

jqueryコードをハンドヘルドデバイスに対してのみ実行するか、480ピクセル未満のビューポートに対してのみ実行する必要があります...実行できますか？

スクリプトと背景画像を実装するために使用しているコードは次のとおりです。

jQuery.noConflict();
jQuery(document).ready(function(){
    jQuery.backstretch("www.url.com/images/bg.jpg", {speed: 150});
});

480ピクセル以下のクライアントに対してこのコードを実行するために、ある種のjQuery条件を追加するにはどうすればよいですか？

助けてくれてありがとう！

4

4 に答える 4

3

http://www.modernizr.com/docs/#mqでこれを行うことができます

Modernizr.load({
  test: Modernizr.mq('only screen and (max-width: 480px)'),
  yep : 'path-to-js/backstrech.js',
  complete : function () {
        //init the backstrech here
  }
});

(標準デバイスのメディア クエリについては、こちらを参照してください。)

于 2011-11-16T14:59:52.720 に答える
1

jQueryはこれを本当に簡単にします：

jQuery.noConflict();
jQuery(function(){

    if (jQuery(window).width() <= 480
        /* Optional */ || navigator.userAgent.test(/browser_sniff_1/)
        /* Optional */ || navigator.userAgent.test(/browser_sniff_2/)
        /* Etc.     */
        ) {
        jQuery.backstretch("www.url.com/images/bg.jpg", {speed: 150});
    }
});

それは次のことを行います：

  1. モードを有効にしnoConflictます。
  2. ready省略構文を介してイベントをフックします。
  3. が<=480ピクセルであるかどうかを確認しwindowます（<だけでなく<=が必要だと思いました）。もしそうなら、他のチェックは必要ありません、私たちは私たちの本体に入りますif。
  4. オプションで、必要に応じて他のブラウザスニッフィングを含めることができますnavigator.userAgent（または、より徹底的に、これに関する記事があります）。ただし、大画面でこれを行う強い理由がない限り、（ブラウザのスニッフィングを回避することは良いことです）気にしないでください。backstretch
  5. ストレッチしている場合は、backstretchプラグインをトリガーします。
于 2011-11-16T14:39:05.963 に答える
0

ここでは、簡単なステートメントでうまくいくはずです。

if (window.screen.availWidth <= 480) {
    // Your code
}
于 2011-11-16T14:54:31.013 に答える
0

iPadの検出のためにこれを行いました。

<script>
    (function($) {
        $.fn.isIPad = function() {
            return (navigator.platform.indexOf("iPad") != -1);
        }
    })(jQuery);

    if($(window).isIPad()) {
        document.write('<script src="', '/path/to.js', '" type="text/JavaScript"><\/script>');
    } else {
        // run other functions here
    } 
</script>

必要なさまざまなユーザー エージェントを navigator.platform オブジェクトに追加するか、その関数を使用してビューポート サイズを決定します。

于 2011-11-16T14:50:46.470 に答える