iPhone не полностью повторяет фоновое изображение

Question

Я создал сайт, который, по моему мнению, был свободен от ошибок CSS, пока я не протестировал это на iPhone.У меня странная проблема в том, что повторяющиеся фоновые изображения не полностью растягиваются по всей странице.

Вот как это выглядит на iPhone и полном веб-сайте URL: Пример веб-сайта

Answer 1

Отключите автоматическое масштабирование, установив метатег viewport для раздела head вашего HTML. Это устанавливает ширину вашей страницы в соответствии с шириной экрана,

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Answer 2

К сожалению, добавление области просмотра для установки масштаба на 100% было не тем, что я искал.

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

Answer 3

Попробуйте это: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

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

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