3

まず、初心者である私は JS が苦手です。

私がやりたいことは、さまざまなデバイス幅に対してさまざまな FitText (jquery.fittext.js) スケーリングを行うことです。たとえば、次のようになります。

$("#hometitle").fitText(1.1); // for mobile

$("#hometitle").fitText(1.2); // for medium screen

$("#hometitle").fitText(1.2); // for large screen

YepNope を次のように使用できることを理解しています (HTML ドキュメントの下部にあります):

<script type="text/javascript">
Modernizr.load([
    {
        test: Modernizr.mq('(max-width:600px)'),
        yep: '{js_path}mobile.js'
    }
]);
</script>

次に、mobile.js内にこれがあります：

$(document).ready(function() { 
    { 
        $("#hometitle").fitText(1.2);
    }
});

[a] 上記のコードは正しいですか?; [b] 3 つの幅の追加テストを YepNope コード (上記) に追加するにはどうすればよいですか。

申し訳ありませんが、JSでは役に立たないです！そして、これをできるだけ早く利用する必要があるプロジェクトがあります。

(補足: Modernizr は head で読み込まれ、ページの下部で、YepNope コード jQuery と fittext が読み込まれます)

前もって感謝します！

4

1 に答える 1

0

私には、あなたは正しい軌道に乗っているように見えます。yepnope.js と modernizr を使用してポリフィルを作成します。

ブラウザでメディアクエリがサポートされているかどうかを最初に確認したり、クエリでデバイスタイプを使用したりするなど、欠けているものがあります。min-width と max width で範囲を指定するのも良い考えです。そうしないと、テスト条件が複数の JavaScript ファイルをロードする可能性があるからです。

複数の条件については、次のようなことができます。

Modernizr.load([

    {
        test: Modernizr.mq("only all"),
        nope: 'testnope.js'// this is to check if media queries are supported at all
    },

    {
        test: Modernizr.mq("only screen and (min-width: 960px) and (max-width:1440px)"),
        yep: 'test3.js'
    },

    {
        test: Modernizr.mq("only screen and (min-width: 768px) and (max-width: 959px)"),
        yep: 'test2.js'
    },

    {
        test: Modernizr.mq("only screen and (min-width:480px) and (max-width:767px)"),
        yep: 'test1.js'
    },

    {
        test: Modernizr.mq("only screen and (max-width:479px)"),//smallest screen
        yep: 'test0.js'
    }
]);

お役に立てれば。

于 2012-09-17T10:39:03.270 に答える