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

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

0 голосов
/ 16 февраля 2019

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

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

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

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

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

enter image description here

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

enter image description here

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

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

Ответы [ 2 ]

0 голосов
/ 17 февраля 2019

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

background: url(add.svg);

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

0 голосов
/ 16 февраля 2019

Используйте медиазапросы -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;
}
...