Фон iPad для блоков div, не занимающих всю ширину экрана

Question

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

Скриншоты:

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

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

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

Answer 1

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

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

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

Answer 2

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

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

body{
 min-width:1024px;
}

Answer 3

это работает

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

Answer 4

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

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

Answer 5

Ширина экрана iPad-экрана в режиме разговора составляет 1024 пикселя, а не 1004.

Answer 6

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

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

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

Answer 7

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

<?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 ?>

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

Answer 8

Добавьте в заголовок своей страницы

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

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