Странное смещение в позиции элемента CSS после изменения ориентации на iPad - PullRequest
Новая
       2

Странное смещение в позиции элемента CSS после изменения ориентации на iPad

1 голос
/ 24 ноября 2011

У меня есть веб-страница, разработанная для iPad, для которой я использовал разные CSS-файлы для разных ориентаций: 

<link REL="stylesheet" href="portrait_style.css" media="all  and (orientation:portrait)"/>
<link REL="stylesheet" href="landscape_style.css" media="all  and (orientation:landscape)"/>

Когда я начинаю из ландшафтного режима, а затем перехожу к портрету, мне нужно добавить 125 пикселейна все абсолютно позиционированные элементы.И когда я начинаю с портрета, он начинается с 0.

Когда я перехожу из портрета в ландшафт и обратно, ему снова требуется смещение.

Имеется демоверсия этого доступного здесь

Я подозреваю, что проблема в том, что есть некоторый элемент ландшафта, который не изменяется в портретном режиме.

В Chrome на моем компьютере это не происходит.

Ответы [ 3 ]

3 голосов
/ 19 марта 2013

Попробуйте снова установить фиксированную позицию с медиазапросами: 

/* portrait */
@media screen and (orientation:portrait) {
    .[your-selector]{
        position:fixed;
    }
}
/* landscape */
@media screen and (orientation:landscape) {
    .[your-selector]{
        position:fixed;
    }
}

Похоже, когда вы снова устанавливаете свойство, оно перерисовывается.

2 голосов
/ 28 февраля 2012

Это вызвано элементом, который расширяет границы области просмотра браузера, либо с шириной более 100%, либо с левым значением, установленным на отрицательное значение.

Исправление, которое я обнаружил, заключается в установке переполнения тела, чтобы заставить видовой экран вести себя: 

body {
     position: relative;
     width: 100%;
     overflow: hidden;
}

Установка position тела будет инкапсулировать все элементы (абсолютные или относительные) в тело и обрезать их по краю тела.

1 голос
/ 24 ноября 2011

Возможно, вам понадобится добавить это: 

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

в вашем разделе <head>.

Подробнее: Определение ориентации iPhone с помощью CSS

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...