Пользовательский обмен запросами с Foundation 6

Question

Я пытаюсь добавить пользовательский медиа-запрос в Interchange для ноутбуков с сетчаткой, но он, похоже, не отвечает. Я уверен, что что-то не в том месте или где-то неправильный синтаксис. Есть идеи?

HTML:

<div 
class="responsive-bg" 
data-interchange="
    [http://brycekirk.com/man-mountain/small.jpg, small], 
    [http://brycekirk.com/man-mountain/medium.jpg, medium], 
    [http://brycekirk.com/man-mountain/large.jpg, large], 
    [http://brycekirk.com/man-mountain/xlarge.jpg, xlarge]
    [http://brycekirk.com/man-mountain/largeretina.jpg, largeretina]"></div>

CSS:

div.responsive-bg {height: 100vh; width: 100%; position: absolute; }

JS:

$(document).foundation();
Foundation.Interchange.SPECIAL_QUERIES['largeretina'] = 'only screen and (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)';

Обменная документация

Codepen

Answer 1

Это НЕ работает, потому что вы добавляете пользовательский запрос после инициализации Foundation, вам нужно использовать перекомпоновку Foundation или вы можете установить медиазапрос перед кодом инициализации.

Foundation.Interchange.SPECIAL_QUERIES['largeretina'] = 'only screen and (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)';

$(document).foundation();