我有一个小JS标记,可以检查调整大小事件的窗口宽度,并在数据属性中相应地提供HTML侧指定的不同全屏背景图像。不幸的是,在这种特殊情况下,我无法使用CSS解决方案。
解决方案自身的解决方案,但它不为视网膜显示图像。如果我正确地看到了这一点,则视网膜显示的图像需要正确显示的分辨率两倍。我已经在脚本中设置了以下断点:1280 x 720px(视网膜:2560 x 1440),1920 x 1080 px(视网膜:3840 x 2160),大于2560 x 1440 px(视网膜: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 + ')');
});
}
}
现在的问题是如何检查视网膜/非视网膜显示屏并将正确的图像与双分辨率相应地提供正确的图像?
检查 window.devicePixelRatio
是否高于1,如果是。
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
}