Ответ 1
Это своего рода проблема с видовым экраном с мобильным Safari, но вы можете получить тот же эффект, уменьшив ширину окна браузера вашего рабочего стола и прокручивая его вправо, вы увидите, что ваш фон начинает выпадать.
Это связано с тем, что, когда вы устанавливаете width:100%
в свои #top
и #header
divs, вы говорите им, чтобы они изменялись до ширины содержащего элемента, который в этом случае является окном браузера ( или в окне просмотра). Вы не говорите им изменять размер содержимого внутри.
Общая ширина виджета Mobile Safari по умолчанию 980px
, поэтому она использует 980px
как ширину содержащего элемента для ваших div. Вот почему ваш макет, который составляет около 1050 пикселей, получает свой фон отрублен.
Вы можете исправить это для мобильного Safari, напрямую установив его окно просмотра (прочитайте Apple Docs) или добавив ширину min-width:
вашего дизайна в пикселях; к вашему body
. Mobile Safari будет использовать значение min-width
для установки своего окна просмотра, а также не позволит ему также работать и в настольных браузерах.