Question

我目前正在开发一个网站 - 当然 - 也需要回应。一切都在iOS和Android上正常运行，除了他没有在Android 上的幻灯片中显示三个特定图像（在Samsung S5，S3，Galaxy Tab 3 / Lollipop，Jelly Bean上测试） /默认浏览器，Chrome）。他确实展示了其余的图像。

我通过JS添加这些图像作为正确div的背景图像：

        $('.header__slideshow--frame').each(function (index) {
            $(this).css({
                'width': slider.parts.header.width(),
                'background-image': 'url(' + (dir + slider.images.links[index]) + ')'
            });
        });

框架的样式是：

    .header__slideshow {
        position: relative;
        overflow: hidden;
        left: 0;
        height: 102%;
        z-index: -1000;
        margin-top: -15em;
        background: $greyOne url('../images/slider-placeholder.png') no-repeat center 35%;

        .header__slideshow--frame {
            float: left;
            height: 100%;
            background-repeat: no-repeat;
            background-position: bottom center;
            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
        }
    }

所有图片均为.jpg格式，不大于260KB，最大宽度为1600px，如果我直接通过浏览器打开它们，则显示它们。

我已经尝试更改（max-）高度，（max-）宽度，位置，z-index，图像的完整路径，将它们添加为.png，删除背景＆＃39;封面＆＃39 ;财产等。

有没有人对调试这类问题有什么想法，建议或提示？

提前致谢！

Answer 1

找到答案！我正在为平板电脑和手机添加不同的图像，比如这个

        var dir = this.images.base;
        if (isTablet) dir += 'tablet/';
        if (isPhone) dir += 'phone/';

但JavaScript认为该网站既是Android手机又是平板电脑，所以他添加的路径如“images / tablet / phone /...”

图像未在Android上的浏览器中显示

1 个答案: