Центрированный div с позицией: absolute имеет смещение для устройств Android, когда содержимое больше, чем область просмотра

Question

Центрированный div с позицией: absolute имеет смещение для устройств Android, когда содержимое больше, чем область просмотра

0

Проблема появляется в браузерах Android, когда на странице находятся следующие данные:

Элемент div с размером, превышающим окно просмотра устройства. (Я использовал 1200 пикселей).
Один или несколько других элементов div с left:0; right:0; margin:auto; left:0; right:0; margin:auto; или left:50%; margin-left:-100px left:50%; margin-left:-100px.

Проблема в том, что "центрированные" элементы div самом деле не являются. Они имеют смещение влево (или сверху, если центрирование по вертикали). Проблема проявляется на устройствах Android в Chrome и Dolphin (WebKit). Он не отображается на рабочих столах (проверены Chrome, FireFox, Safari и IE).

Вот пример CSS:

body{ margin:0; padding:0; }
.wide-element {
    position:absolute;
    height:800px; width:1200px;
    left:50%; margin-left:-600px;
    background:url(1200px-wide.png);
}
.fixed-1, .fixed-2, .absolute-1, .absolute-2 { height:200px; width:200px; }
.fixed-1 {
    position:fixed; margin:auto;
    left:0; right:0; top:0; bottom:0;
    background:rgba(0, 0, 255, .5);
}
.fixed-2 {
    position:fixed; margin:-105px 0 0 -105px;
    left:50%; top:50%; 
    border:5px solid blue;
}
.absolute-1 {
    position:absolute; margin:auto;
    left:0; right:0; top:0; bottom:0;
    background:rgba(255, 0, 0, .5);
}
.absolute-2{
    position:absolute; margin:-105px 0 0 -105px;
    left:50%; top:50%;
    border:5px solid red;
}

И HTML:

<body>
    <div class="wide-element"></div>
    <div class="fixed-1"></div>
    <div class="fixed-2"></div>
    <div class="absolute-1"></div>
    <div class="absolute-2"></div>
</body>

Я добавил position:fixed пара в отличие от position:absolute пара. Как вы можете видеть на следующем скриншоте, fixed divs находятся в фактическом центре экрана, в то время как absolute divs немного вверх и слева от центра макета. Наиболее проблематичной является то, что это смещение приводит к отключению элементов в левой части экрана и недостижимости.

Я хотел бы знать, почему (именно) это происходит (и почему только на мобильных устройствах), но реальный вопрос:

Как я могу надежно div элемент div который может быть больше, чем область просмотра, без устройств Android, делающих части страницы недоступными?

Pi Marillion 07 апр. 2014, в 04:07

Источник

0

это главная проблема с этим старым способом центрировать элемент. Вы можете установить минимальную высоту / ширину для тела равным размеру вашего элемента, чтобы принудительно прокручивать тело и держать элемент с максимальным смещением 0 0 (вверху, слева), иначе у вас есть другие методы, такие как inline-block, display table / table-cell и теперь также отображать flex, сохраняя все элементы в потоке своего контейнера и экрана.
G-Cyr 07 апр. 2014, в 01:40

Теги:

html

android

css

mobile

1 ответ

Ещё вопросы

это главная проблема с этим старым способом центрировать элемент. Вы можете установить минимальную высоту / ширину для тела равным размеру вашего элемента, чтобы принудительно прокручивать тело и держать элемент с максимальным смещением 0 0 (вверху, слева), иначе у вас есть другие методы, такие как inline-block, display table / table-cell и теперь также отображать flex, сохраняя все элементы в потоке своего контейнера и экрана.

Pi Marillion · Answer 1 · 2014-04-07T01-45-00.000Z

Это предварительный ответ на мой собственный вопрос.

Добавление строки <meta name="viewport" content="width=1200"> в раздел head похоже, заставляет браузер устанавливать видовое окно на указанный размер. Однако, поскольку это не является истинным исправлением, а другим может потребоваться более гибкое решение, я оставляю его открытым для получения более полного ответа.