Размытое фоновое изображение на мобильных устройствах

Я пытаюсь создать отзывчивый сайт на Bootstrap и использую фоновое изображение для всего тела моего сайта. Я использую свое фоновое изображение и устанавливаю для него значение «не повторять центр фиксированного центра» и размер фона как «обложку», как показано ниже:

body{

            background: url(img/LandingPageIcarus.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;

        }

Так что это выглядит нормально в Chrome, Firefox, IE, но когда я открываю его на любом мобильном устройстве, фоновое изображение действительно размыто. Я пробовал много вариантов из разных источников, но мне не повезло, и я действительно борюсь здесь, так как это мой первый сайт. Я был бы очень признателен, если бы кто-нибудь мог пролить свет, чтобы я мог решить проблему.

Вот так это выглядит на телефоне мой сайт


jquery css twitter-bootstrap background-image blurry
person AtlantisNaranja    schedule 04.09.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Когда мы смотрим на любой веб-сайт через симулятор инструментов разработчика, значение ширины пикселя для мобильных устройств находится в диапазоне 320 пикселей для iPhone5, 360 пикселей для Nokia N9, samsung S3, note 3 и т. д., но реально ли это? Это нехорошо, когда дело доходит до размера шрифта и изображений, потому что эти устройства имеют более высокое разрешение, и вам нужно принять это во внимание. Для вашей проблемы с фоновым изображением используйте это

@media screen and (min-resolution: 1.5dppx) {
.welcome-header > h1{
  background-image: url('../images/html5_384x384.png');
}
}

@media screen and (min-resolution: 2dppx) {
.welcome-header > h1{
  background-image: url('../images/html5_512x512.png');
}
}

Используйте изображение вашего фона с более высоким разрешением для этих двух диапазонов Dppx.

Хорошее руководство прямо от разработчиков Chrome https://developer.chrome.com/multidevice/webview/pixelperfect

person Sandeep C. Nath    schedule 04.09.2017
comment
Я попробовал ваше решение, но я делаю это неправильно или не работает. Это действительно сводит меня с ума, хе-хе. - person AtlantisNaranja; 05.09.2017
comment
Вы можете внести это изменение в постановку и уведомить меня? - person Sandeep C. Nath; 05.09.2017
comment
Вы используете одно и то же изображение для всех единиц dppx. Для этого вам нужно использовать 3 разных изображения с соответствующей плотностью пикселей. html5rocks.com/en/mobile/high-dpi Посмотрите на пример с изображением бабуина - person Sandeep C. Nath; 07.09.2017
comment
спасибо, что нашли время, чтобы изучить его немного дальше. Я пробовал это, но не работал. Это мой первый веб-сайт, и я думаю, что он становится слишком продвинутым для меня :) Я рассматриваю возможность изменения дизайна, чтобы избежать фонового изображения размером с обложку и сделать его более простым. - person AtlantisNaranja; 07.09.2017
comment
Этот дизайн хорош, попросите помощи у друга, который знает фотошоп, он поймет, что нам здесь нужно. - person Sandeep C. Nath; 07.09.2017