Multiple breakpoints

[jlevinsohn31]

How can I control when multiple breakpoints are found by the plugin. I have breakpoints set for width and pixel density. There are cases when both will be true. I'm hoping to get the markup need for when these crossover. For example, maybe it's

img data-pixel-ratio-1="path.1" data-pixel-ratio-1.5="path.2" data-min-width-320="path.320" data-pixel-ratio-min-width="path1and320" /

Does that make sense? Thanks for your help!

[jlevinsohn31]

Any help here? Still hoping for an answer.

[ryanve]

@jlevinsohn31 If you use 2 tests at once, then one will override the other. You may want to create a custom test that combines both, like in #10. Does that help?

[jlevinsohn31]

This does help, thank you for responding! Perhaps there's a way for the plugin to handle the crossover of two tests somehow in future.

[danielkoch]

@jlevinsohn31 Did you solve your requirement described above? I have also the problem with two "overlapping" tests.

[danielkoch]

@ryanve I understand you correct? You said it is currently possible to fit this needs with the addTest method? Do you have an example for this requirement?

[jlevinsohn31]

@danielkoch I didn't end up making multiple tests. I ended up doing this instead. If it's a retina device I use my retina test and if not I fall back to width. Then I detect touch devices through modernizr and do the same thing with a mobile prefix and fall back to different widths. I'm sure it's not the most efficient and there are still gaps but it was the best I came up with under a tight deadline.

var retina = window.devicePixelRatio > 1;
if ( $('html').hasClass('touch') ) {
    if ( retina === true ) {
        Response.create({
            prop: 'device-pixel-ratio',
            prefix: 'mobile-pixel-ratio-',
            lazy: true,
            breakpoints: [1, 1.5]
        });
    } else {
        Response.create({
            prop: 'width',
            lazy: true,
            prefix: 'mobile-min-width-',
            breakpoints: [0, 320, 480]
        });
    }
} else {
    if ( retina === true ) {
        Response.create({
            prop: 'device-pixel-ratio',
            prefix: 'pixel-ratio-',
            lazy: true,
            breakpoints: [1, 1.5]
        });
    } else {
        Response.create({
            prop: 'width',
            lazy: true,
            prefix: 'min-width-',
            breakpoints: [0, 825]
        });
    }
}