Example of simple multi-serve setup

[fluxxus]

I believe I got the setup correctly, it works as expected. Except one thing, the correct image is not showing on iPad mini retina.

Here is the setup:

 var bLazy = new Blazy({ 
            breakpoints: [{
                width: 900 // max-width
                , src: 'data-src-small'
            }
                         ]

        });

Small image is loaded for devices < 900, and regular image that is stored in data-src is provided for all other resolutions.

This is not working on iPad mini retina(landscape), it shows the smaller image, although clearly it should be serving the regular version through data-src="regular-image.jpg".

[dinbror]

hey @madebym

I don't have an ipad mini retina :/ But yes, I would also think it took the larger regular one.
Can you test what screen width it outputs: window.screen.width

A fix in the meantime would be adding a retina image(the larger one) for your 900 breakpoint (http://dinbror.dk/blog/blazy/#Retina):

     <img data-src-small="image.jpg|retina-image.jpg" ... />

[dinbror]

Friendly ping @madebym

Can you test what screen width it outputs: window.screen.width

[fluxxus]

@dinbror Sorry for the late reply.

Very confusing things are happening.

If I use window.screen.width I get: 768px for portrait and 768px for landscape. When using window.innerWidth I get 980px for portrait and 1024px for landscape.

Correct sizes should be 768 x 1024, nevermind that this is a retina screen and the actual resolution is twice that size.

I'll run some more tests, there are many JS ways of checking for width and height.

[fluxxus]

I've found one nice site that gets the dimensions with all the possible ways in JS.

Here are two screenhots attached, one for each device orientation.

[dinbror]

Hey @madebym

Thanks for the testing results.
Strange that window.screen.width returns 768px in landscape mode.
I'll try to dig more into it.

[dinbror]

Breakpoints marked as obsolete in version 1.6.0. Use srcset and/or the picture element instead.