Как бороться с проблемой CSS sprite (используя background-position), приводящей к размытым изображениям на мобильных устройствах? - PullRequest
Новая
       7

Как бороться с проблемой CSS sprite (используя background-position), приводящей к размытым изображениям на мобильных устройствах?

0 голосов
/ 29 апреля 2020

Во-первых, при использовании CSS с обычным изображением мы устанавливаем width:50px, и это применяется ОК на настольных и мобильных устройствах (конечно, качество изображения и естественный размер достаточно высоки).

Однако при использовании CSS спрайта с простым трюком с background-position с таким же размером (ширина 50 пикселей) отображаемое изображение будет размытым (из-за масштабирования или чего-то в этом роде).

Я знаю, что мы должны предоставить лучшее изображение таблицы спрайтов (конечно, с большим размером). Но в этом случае width:50px не будет работать, я имею в виду, что это должно быть и большее значение. Я не знаю, как определить это значение. Потому что, как я сказал сначала, любая коробка / элемент шириной 50px будет обрабатываться мобильными устройствами как-то автоматически. Если установить большее значение, результирующее изображение может неожиданно иметь больший размер (хотя качество может быть желаемым). 

.item {
    background: url(/sprites.png) 0px 0px;
    width: 50px;
    ...
}

Как вы можете решить эту проблему?

1 Ответ

0 голосов
/ 07 мая 2020

Для тех, кто заботится о решении, использующем PNG-спрайты, это именно то, что вы можете сделать. Чтобы обеспечить плавную визуализацию спрайтов на мобильных (а также экранах с высоким разрешением) устройствах, нам нужно увеличенное изображение (размером примерно в 2 раза), например: для обычного экрана требуется ширина листа спрайтов 500 пикселей, требуется как минимум еще один с шириной 1000 пикселей ).

Все background-position и background-size одинаковы на всех устройствах (мобильные и настольные ПК), единственное отличие здесь - background-image. На настольных ПК вы можете использовать обычную (маленькую) таблицу спрайтов, тогда как на мобильных телефонах вы можете использовать более крупную (как упомянуто выше).

Вот 2 фрагмента кода CSS, применяемые для настольных ПК и мобильных телефонов:

Это общее CSS: 

.item {
   background-position: 0px 0px;
   background-size: 500px 300px;
   background-repeat: no-repeat;
}

Это применяется для настольных ПК : 

.item {
   background-image: url(your_normal_sprites_500.png);
}

Это применимо для мобильных телефонов : 

.item {
   background-image: url(your_large_sprites_1000.png);
}

Для программного переключения стиля / css для настольных компьютеров / мобильных устройств мы можем воспользоваться window.devicePixelRatio. Это не поддерживается в некоторых старых браузерах, но теперь оно должно быть доступно в большинстве популярных современных браузеров. 

var isHiResScreen = (window.devicePixelRatio || 1) > 1;
if(isHiResScreen){
   //pick style for mobile
}
else {
   //pick style for desktop pc
}

Конечно, вы должны рассмотреть возможность использования таблицы спрайтов SVG, если это возможно, как @ Dejan.S упомянул в своей статье. комментарии (и, конечно, я знал об этом благодаря ему). Это очень многообещающе:)

...