IPad-фон для блоков div, не охватывающих всю ширину экрана

У меня была проблема с блоками div, простирающимися по всей ширине экрана iPad. Кажется, он останавливается примерно на 20 пикселей с правой стороны экрана.

Скриншоты:

Для меню у меня есть div-блок и UL внутри самого меню. Ширина UL установлена равной 1000px, а базовый блок div равен ширине: 100%; Ширина этого фона составляет ровно 1009 пикселей.

Нижний колонтитул - это блок div с фоном и два плавающих блока div. Ширина фона для этого составляет ровно 1004px.

У меня была эта проблема на других сайтах, особенно в этой области. У кого-нибудь есть идея?

Ответ 1

Вы видите проблему на iPad, потому что ее видовое окно по умолчанию - 980 пикселей (см. Apple docs). Таким образом, эффект, который вы видите, такой же, как если бы вы уменьшили размер браузера на рабочем столе до менее 1000 пикселей и прокрутите вправо (он делает то же самое).

Вы заметите, что размер пробела изменяется в зависимости от ширины окна браузера. Это связано с тем, что когда вы устанавливаете ширину: 100% для ваших оберточных div, вы говорите, что они изменяют размер до ширины содержащего элемента, который в этом случае является окном браузера или окном просмотра iPad. Вы не говорите им изменять размер содержимого внутри.

@sandeep solution является правильным, и как вы его реализовали, он отлично работает для меня в Safari, но не в любом браузере, в котором я пробовал. ваш пользовательский агент нюхает, чтобы обслуживать код только для Safari? Если это так, нет необходимости, вы можете просто применить тег min-width:1024px или даже просто min-width:1000px к тегу body или .footerbg, однако вы обычно применяете CSS.

Ответ 2

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

Решение: Просто напишите в своем теле следующее:

body{
 min-width:1024px;
}

Ответ 3

это работает

<meta name="viewport" content="width=1003, initial-scale=1, maximum-scale=1">

Ответ 4

Ширина экрана iPad-screen, когда речь идет о ландшафтном режиме, составляет 1024 пикселя, а не 1004.

Ответ 5

У вас неправильный размер ширины. Но не нужно беспокоиться. Вам просто нужно иметь 1024 вместо 1004.

Надеюсь, это поможет!

Ответ 6

Добавить в свою страницу

<meta name="viewport" content="width=1000px">

Он работает для всех браузеров на ipad, а не только для сафари

Ответ 7

Если вам/кому-то нужно исправить только в iPads, вы можете сделать, например

<?php if ((bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad')): ?>
    <meta name="viewport" content="width={{YOUR PREFERED WIDTH FOR IPAD}}">
<?php else: ?>
    <meta name="viewport" content="width=device-width">
<?php endif ?>

Надеюсь, что эта помощь:)

Ответ 8

Что произойдет, если вы попытаетесь использовать метатег viewport для установки ширины окна просмотра на ширину устройства?

<meta name="viewport" content="width=device-width, initial-scale=1">

Источник: Сеть разработчиков Mozilla