Значки становятся размытыми из-за области просмотра и плотности пикселей на разных устройствах

Question

Я использую область просмотра и медиа запросы, чтобы сделать мой сайт мобильным.

<meta name='viewport'content='width=device-width,initial-scale=1.0'>

У меня есть кнопка с таким фоном:

button{
 width:29px;
 height:29px;
 border:1px solid white;
 background:url(add.jpg);
}

На компьютере она выглядит очень просто:

На устройстве с высокой плотностью пикселей необходим тег видового экрана для правильного отображения веб-сайта.Но изображения растягиваются для отображения в новых размерах окна просмотра.

Как видите, даже изображение загружается больше.Таким образом, 29px фактически отображается как 58px на мобильном устройстве (в зависимости от того, какое устройство).И изображение растягивается.

Есть ли какие-то решения для этого?Единственное, что я нашел, это не использовать изображение.Есть идеи?

Answer 1

Лучшее решение для этого - использовать и SVG.Используйте Illustrator для создания значка и используйте его, как если бы это было обычное изображение на веб-сайте.

background: url(add.svg);

Это универсальное решение, которое будет работать со всеми разрешениями сейчас и в будущем.

Answer 2

Используйте медиазапросы -webkit-min-device-pixel-ratio и min-resolution для предоставления изображения с разрешением 58 на 58 пикселей, которое будет использоваться на дисплеях с более высоким разрешением.

В этом примере предполагается, что вы создали новое изображение дляДисплей с высоким DPI называется add@2x.jpg.(Суффикс @2x является соглашением, обычно используемым при разработке собственных приложений для iOS, но вы можете назвать файл как угодно.)

button{
  width: 29px;
  height: 29px;
  border: 1px solid white;
  background: url(add.jpg);

  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    background: url(add@2x.jpg);
    background-size: 29px 29px;
  }
}

Важно установить свойство background-size, чтобы "уменьшите изображение до ожидаемого размера в CSS-пикселях .

Если вы хотите предоставить изображение, оптимизированное для устройств с более высоким разрешением, таких как iPhone X,Вы можете добавить дополнительный медиа-запрос:

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) { 
  background: url(add@3x.jpg);
  background-size: 29px 29px;
}