Modernizr + Yepnope + FitText (разные размеры шрифта / масштабирование для разных видовых экранов)

Question

Во-первых, я мусор с 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] Как добавить дополнительные тесты для трех значений ширины к коду YepNope (см. выше).

Извините еще раз, я бесполезен с JS! И есть проект, который должен использовать это как можно скорее.

(примечание: Modernizr загружается в голове, а внизу страницы перед загрузкой моего кода YepNope jQuery и fittext)

Заранее спасибо!

Answer 1

Мне кажется, что вы на правильном пути. Использование 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'
    }
]);

Надеюсь это поможет.