Question

我有一个小的JS脚本，用于检查resize事件的窗口宽度，并相应地在数据属性中提供html端指定的不同全屏背景图像。不幸的是，我不能在这种特殊情况下使用CSS解决方案。

解决方案本身有效，但它不包含视网膜显示的图像。如果我看到这一点，视网膜显示器的图像需要两倍的分辨率才能正确显示。我在脚本中设置了以下断点：1280 x 720px（视网膜：2560 x 1440），1920 x 1080像素（视网膜：3840 x 2160），大于2560 x 1440像素（视网膜：5120 x 2880）。

HTML：

<section id="page-title" class="page-title-lg img-cover header-lg" data-bg-xxl="test/2560.jpg" data-bg-xl="test/fullhd.jpg" data-bg-lg="test/hdready.jpg">
    <div class="container">
      <div class="page-title-wrapper">
        <div class="page-title-txt">
          <h1>Large Page Title</h1>
        </div>
      </div>
    </div>
  </section>

JS：

function checkWidth(){

    var screenWidth = $window.width();

    if( screenWidth <= 1280 ){
        // Hd-ready desktop - 1280 x 720
        $('[data-bg-lg]').each(function() {
            var dataImg = $(this).attr('data-bg-lg');
            $(this).css('background-image', 'url(assets/img/' + dataImg + ')');
        });
    } else if ( screenWidth >= 1281 && screenWidth <= 1920 ) {
        // Full-hd desktop - 1920 x 1080
        $('[data-bg-xl]').each(function() {
            var dataImg = $(this).attr('data-bg-xl');
            $(this).css('background-image', 'url(assets/img/' + dataImg + ')');
        });
    } else {
        // Huge desktop - 2560 x 1440
        $('[data-bg-xxl]').each(function() {
            var dataImg = $(this).attr('data-bg-xxl');
            $(this).css('background-image', 'url(assets/img/' + dataImg + ')');
        });
    }

}

现在的问题是如何检查视网膜/非视网膜显示器并相应地提供具有双重分辨率的正确图像集？

Answer 1

检查window.devicePixelRatio是否大于1，并将图像替换为高分辨率版本（如果是）。

Answer 2

var query = "(-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi)";

if (matchMedia(query).matches) {
  // do high-dpi stuff
} else {
  // do non high-dpi stuff
}

如何在jQuery中检查视网膜显示并相应地提供双分辨率图像？

2 个答案: