Фоновое изображение покрывает только половину страницы на iPhone

Question

У меня есть сайт, который требует очень большое фоновое изображение.Страница загружается корректно во всех веб-браузерах, которые я пробовал, кроме Safari на iPhone и iPad.В Safari на этих двух мобильных устройствах фон покрывает только левые 50% страницы.

Из всех проведенных мной испытаний я могу сказать, что это связано с длиной фонового изображения, которое я использую.Это мой css:

#bodyLong
{
    background-image:url('/Images/TaylorProductsBackground3459.jpg');
    background-repeat:no-repeat;
    width: 1150px;
    height: 3459px;
    margin: 0 auto;
    text-align: left;
    padding: 0px;
    position:relative; 
}

Я знаю, что в этом случае что-то конкретно не так, потому что если я сделаю одно изменение в CSS и установлю height: 1000px;, фоновое изображение больше не будет отображаться дважды позадняя часть страницы.Что я могу сделать, чтобы это исправить?Я бы предпочел не использовать такое большое изображение, но это запрос клиента, и я не смог убедить их в обратном.

Answer 1

Я думаю, что вы работаете в пределе iOS-версии Safari.Проверьте все документы по созданию веб-страниц для мобильных устройств, и вы можете найти кое-что об ограничении размера изображения.

Проверьте ответ здесь: Ограничения размера изображения в мобильном сафари?

Возможные решения могут заключаться в том, чтобы использовать меньший размер изображения и увеличивать его, если детали не важны, или разбивать изображение и разбивать его на фрагменты.

А если серьезно, зачем вам нужно изображение размером 3500 пикселей в качествефон.Плохая идея (ТМ)

Answer 2

Я знаю, что некоторые говорили о больших изображениях, которые плохо рендерится на новом iPad из-за ограничения в WebKit. Обходной путь должен использовать прогрессивные JPEG. Попробуйте сохранить изображение в формате прогрессивного Jpeg и посмотрите, решит ли это проблему.

Answer 3

Вы должны убедиться, что изображение соответствует разрешению экрана, и вы должны убедиться, что вы сетчатки и не сетчатки размеров