riloadr.js仅显示iPad的移动图像

Question

我有以下代码：

// Responsive image loading (riloadr)
var riloadrDefaultGroup = new Riloadr({
    breakpoints: [
        {name: 'mobile', maxWidth: 699},
        {name: 'tablet', minWidth: 700, maxWidth: 959},
        {name: 'desktop', minWidth: 960}
    ],
    watchViewportWidth: '*'
});

如果我在桌面上并调整浏览器大小，则一切正常。调整大小时的图像SRC的交换，而3个图像中只有一张刷新。

iPad的情况是，它仅关心maxWidth: 699断点？

Answer 1

riloadr.js使用window.screen.width与设备的DPI结合使用。在iPad上，这返回384px（768px/2dpi）

使用以下内容：

// Responsive image loading (riloadr)
var riloadrDefaultGroup = new Riloadr({
    breakpoints: [
        {name: 'mobile', maxWidth: 699},
        // use the original (or "base") tablet values divided by the dpi for tablet
        {name: 'tablet', minWidth: 350, maxWidth: 480, minDevicePixelRatio: 2}, // retina portrait
        {name: 'tablet', minWidth: 700, maxWidth: 959}, // these are the base numbers as they might appear on a desktop browser
        // use the original (or "base") desktop values divided by the dpi for desktop
        {name: 'desktop', minWidth: 480, minDevicePixelRatio: 2}, //retina landscape
        {name: 'desktop', minWidth: 960},  // these are the base numbers as they might appear on a desktop browser
    ],
    watchViewportWidth: '*'
});

如果有3DPI设备，请将平板电脑/桌面分开（因为它们可能出现在DPI为1的桌面计算机上），然后3 ...

{name: 'desktop', minWidth: 320, minDevicePixelRatio: 3}