размер фона: обложка выглядит пиксельной на дисплее retina

Веб-сайт, над которым я работаю, можно увидетьздесь . Если вы посмотрите раздел "о компании" или "контакт" на iPad 3 или iPhone 4, фон будет выглядеть сумасшедшим.

У меня есть background-size, установленный в cover, так что когда пользователь изменяет его размер, он масштабируется соответствующим образом, однако на iPad или iPhone он выглядит ужасно.

Любая помощь или советы о том, как исправить это для устройств @media only screen and (min-device-pixel-ratio: 2)?

Спасибо.

2 4
html css iphone ipad retina-display

2 ответа:

Это потому, что вы используете background-attachment:fixed - по какой-то причине это при использовании с background-size: cover на iOS вызывает такое поведение. (У меня была такая же ошибка в http://jag.is и только что разрешил его сегодня).

Поэтому, если вы добавите следующее, Это должно быть решено: 

/* for background-size:cover replacement on iOS devices */
@media only screen and (orientation: portrait) and (device-width: 320px), (device-width: 768px) {
    header {
      -webkit-background-size: auto 150%;
      background-attachment: scroll;
    }
}
@media only screen and (orientation: landscape) and (device-width: 320px), (device-width: 768px) {

    header {
      -webkit-background-size: 150% auto;
      background-attachment: scroll;
    }
}

Свойство -webkit-background-size также предназначено для iOS, поскольку оно не распознает СВОЙСТВО cover для background-size

Вот статья , из которой я нашел свои решения.

Прекрасный дизайн сайта кстати.

11

При создании изображений высокого разрешения для IOS вам нужно использовать запрос high res media, который вы, кажется, уже делаете. Кроме того, ваше изображение должно быть в два раза больше, а затем уменьшено до 50% для высокой сетчатки. 

@media all and (-webkit-min-device-pixel-ratio : 1.5) {
            #header { background: url(headerRatio2.png); background-size: 50%; }
        }

Этот метод должен работать.. Если это не так, то убедитесь, что у вас есть соответствующие мета-теги, и дважды проверьте свой код.

2