riloadr.js 仅显示 Ipad 的移动图像答案

【问题标题】：riloadr.js only showing mobile image for Ipadriloadr.js 仅显示 Ipad 的移动图像
【发布时间】：2014-02-04 00:14:43
【问题描述】：

我有以下代码：

// 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 断点是怎么回事？

【问题讨论】：

标签： javascript ipad mobile responsive-design

【解决方案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}

【讨论】：