Question

关于Retina设备的很多信息来自〜2013年，但最近并不多。

似乎，例如在retina.js中，它包含设备像素比率为＆gt;的任何内容。 1.5＆＃34;视网膜＆＃34;，但这些天所有的智能手机都没有超过1.5？我的台式电脑也可以。

我的问题，为什么不总是提供您可以访问的最高分辨率图像，而不是为＆＃34;非视网膜＆＃34;创建半尺寸版本。设备，据我所知，它并不存在太多，并且不会因为提供更高分辨率的图像而受到很大影响。

感谢!!!

Answer 1

使用2x图像是一个巨大的痛苦。

谁能知道什么是“ best ”，但我目前正在处理像这样的组合中的图像：

我使用父元素以便图像填充它 - 而父母/或它的祖先将决定任何限制。您可以使用图片元素。（通常，src由CMS或{{image.small.url}}等提供。

您的问题的官方答案是，人们不会将更高级别的文件提供给所有内容 - 因为文件更大并且他们希望网站尽可能快地加载。 /但是如果你将图像大小加倍（两倍于它将呈现的大小，并压缩到大约40左右），那么使用父元素来调整它的大小 - 它实际上是一个较小的文件大小。对此有非常具体的研究。不过，我不知道它如何适用于绘画和浏览器渲染。

MARKUP

<figure class='poster'>
    <img src='' alt=''
        data-small='http://placehold.it/600'
        data-medium='http://placehold.it/1000'
        data-large='http://placehold.it/2000'
    />
</figure>

STYLES（手写笔）

figure // just imagine the brackets if you want
    margin: 0
    img
        display: block
        width: 100%
        height: auto

.poster
    max-width: 400px

SCRIPT

$(document).on('ready', function() {

    // $global
    var $window = $(window);
    var windowWidth;
    var windowHeight;

    function getWindowDimentions() {
        windowWidth = $window.width();
        windowHeight = $window.height();
    }

    function setResponsibleImageSrc(imageAncestorElement, container) {
        var large = false; // innocent until proven guilty
        var medium = false; // "
        var context;
        if ( !container ) {
            context = windowWidth;  
        } else {
            context = $(container).outerWidth();
        }
        var large = context > 900;
        var medium = context > 550;

        $(imageAncestorElement).each( function() {
            var $this = $(this).find('img');
            var src = {};
            src.small = $this.data('small');
            src.medium = $this.data('medium');
            src.large = $this.data('large');
            if ( large ) {
                $this.attr('src', src.large);
            } else if ( medium ) {
                $this.attr('src', src.medium);
            } else {
                $this.attr('src', src.small);
            }
        });
    };

    $window.on('resize', function() { // this should jog a bit
        getWindowDimentions();
        setResponsibleImageSrc('.poster', 'body');
    }).trigger('resize');

});

这完全取决于你在做什么 - 而且还没有银弹。每个图像的上下文都是如此独特。我的目标是进入每个尺寸的球场 - 在出口时将图像压缩到Photoshop中......将它们的尺寸加倍，然后父母将它们视为视网膜。在大多数情况下，尺寸实际上较小。

CodePen示例：http://codepen.io/sheriffderek/pen/bqpPra

网络开发中的Retina设备：我还需要2x图像吗？

1 个答案:

MARKUP

STYLES（手写笔）

SCRIPT