Вот этот сайт: www.prestigedesigns.com
Проблема в том, что мой верхний и нижний колонтитулы не будут растягиваться до назначенных 100%, но только на iPhone/iPad.
Я пробовал то, что я думаю, это все, и я действительно мог бы использовать какую-то помощь? Есть ли еще кто-нибудь, у кого есть аналогичная проблема?
Спасибо.
Это своего рода проблема с видовым экраном с мобильным Safari, но вы можете получить тот же эффект, уменьшив ширину окна браузера вашего рабочего стола и прокручивая его вправо, вы увидите, что ваш фон начинает выпадать.
Это связано с тем, что, когда вы устанавливаете width:100% в свои #top и #header divs, вы говорите им, чтобы они изменялись до ширины содержащего элемента, который в этом случае является окном браузера ( или в окне просмотра). Вы не говорите им изменять размер содержимого внутри.
Общая ширина виджета Mobile Safari по умолчанию 980px, поэтому она использует 980px как ширину содержащего элемента для ваших div. Вот почему ваш макет, который составляет около 1050 пикселей, получает свой фон отрублен.
Вы можете исправить это для мобильного Safari, напрямую установив его окно просмотра (прочитайте Apple Docs) или добавив ширину min-width: вашего дизайна в пикселях; к вашему body. Mobile Safari будет использовать значение min-width для установки своего окна просмотра, а также не позволит ему также работать и в настольных браузерах.
Установите видовое окно для адаптации вашей страницы на любом устройстве.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Установите min-width:(Width of your design)px; в файле CSS, и эта проблема будет решена.
он не назначен width: 100% заголовок получает width: 1009px; то же самое с нижним колонтитулом.
Просто догадка, поскольку я не могу ее протестировать, но элемент ноги, который у вас есть в footbar, установлен на абсолютную ширину в пикселях, а нижняя панель равна% - то же самое с вашим элементом заголовка - попробуйте переключить их на % тоже?