2014-01-30 2 views
0

У меня проблема с фиксированной позицией на моем сайте при наклоне iPhone или iPad. Я прочитал много потоков о фиксированном позиционировании в IOS, но даже если это было большой темой некоторое время назад, похоже, что теперь Safari для IOS поддерживает положение CSS: фиксированное (по крайней мере частично в соответствии с http://caniuse.com/#search=fixed). Действительно, он работает большую часть времени, но у меня остается одна проблема, когда я наклоняю свое устройство.Фиксированное положение и наклон на IOS

У меня есть в моем теле:

<header>Title</header> 
<main>Content</main> 

и:

header { 
    position: fixed; 
    left: 0; 
    top: 0; 
    z-index: 10; 
    height: 50px; 
    padding: 0px 10px; 
    width: inherit; 
} 

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

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

$(window).resize(function(event) { 
    var currentPosition = $(window).scrollTop(); 
    $(window).scrollTop(currentPosition+1); 
}); 

С помощью этого раствора на устройстве iOS5, фиксированный заголовок остаться правильно на вершине, но при переходе от пейзажа к портрету, он сохраняет свой размер ландшафта (ручной свиток с оттенком на экране делает заголовок получить его правильный размер).

Благодарим за помощь.

ответ

0

Я проделал некоторый эксперимент, и я решил проблему, связанную с тегом meta viewport. Моя голова тег, содержащий:

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

Я пробовал:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" /> 

Теперь я не имею неправильное поведение наклона больше и масштаб все еще отключен. Кажется, он работает и на андроиде, и на верхнем и нижнем фиксированном положении.

Смежные вопросы