Писать на форуме DIAFAN.CMS могут только зарегистрированные пользователи. Войдите или зарегистрируйтесь.

Форум Сайт на DIAFAN.CMS Интеграция дизайна Отображение фона в мобильной версии


Виктор Ильясов (isprom) Сайт в Diafan.Cloud15 июня

Здравствуйте, подскажите, пжл, на сайте http://dacha-portofino.ru есть background-image. В декстопной версии отображается все хорошо, а в мобильной фон очень размыт, как будто картинка плохого качества. При чем при инспектировании в Опера, при установке ширины экрана как на мобильном все отображается нормально, а если смотреть именно со смартфона, то размыто.

Сергей (Simberto Media) (universe) 8615 июня

На мобильной версии 1 пиксель графики отображается 4, 8 и т.д. физическими пикселями, в зависимости от плотности пикселей конкретного устройства. Соответственно, графика должна быть детальнее для показа ее на экранах с высоким DPI.

Немного теории: https://m.habr.com/ru/post/150071/

Виталий (DIAFAN.CMS) 67515 июня

А какой фон? Дерево? У меня на мобильном всё чётко.

Виктор Ильясов (isprom) Сайт в Diafan.Cloud15 июня

Да, дерево, у меня на айфоне почему то размыто

Сергей (Simberto Media) (universe) 8615 июня

У меня тоже особой размытости не обнаружено. Скорее всего у вас retina с xxhdpi или выше
На всякий случай список метрик для многих устройств https://material.io/tools/devices/ - в последней колонке как раз указано соотношение dp к разрешению в пикселях.

По простому смысл такой: чем больше значение - тем больше будет видна размытость на том или ином устройстве, если не используется подстройка изображений для разных устройств.

Виталий (DIAFAN.CMS) 67515 июня

А я прям скрин приложу с телефона
Это мутно?

Виктор Ильясов (isprom) Сайт в Diafan.Cloud15 июня

Нет, это нормально, на айфоне вот так

Виталий (DIAFAN.CMS) 67515 июня

А, не, так это не пиксели. Это айфон так на background-size: cover; реагирует, растягивает картинку по всей высоте и ширина получается огромная, он её масштабирует и Вы видите мыло не из-за экрана, а из-за огромного увеличения. Короче, попробуйте /* background-size: cover; */ убрать