Подтвердить что ты не робот

Фиксированное позиционирование для мобильных браузеров

На мобильном сайте, который я создаю, мне нужен верхний заголовок, чтобы оставаться неподвижным.

Мне известно о решении фиксированной позиции для Mobile Safari, как показано здесь:

http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

Я попробовал, и он работает хорошо. Тем не менее, мне было интересно, существует ли одно решение для всех основных мобильных браузеров для смартфонов. Примечание. Мне не нужен нижний колонтитул, чтобы оставаться неподвижным, только верхний заголовок. Таким образом, это должно облегчить размещение для всех размеров экрана для мобильных устройств, так как я просто установил div top на 0 onScroll.

Спасибо!

4b9b3361

ОТВЕТЫ

Ответ 1

Важное обновление

Как и в iOS 5, фиксированное позиционирование отлично работает на мобильных устройствах. Точно так же последние андроиды поддерживают его.

Старый ответ

Я думаю, iScroll - наиболее активно разработанное решение, оно поддерживает Android

Но есть несколько вещей, на которые нужно обратить внимание:

  • Включив этот хак, вы отключите функции, которые люди используют для масштабирования.
  • Это добавляет много сложности вашему решению.

По этим причинам JQtouch решил не использовать его:

Не проблема. В настоящее время поддерживается в jQTouch. Не знаете, как вы знакомы, но главная проблема вот что мобильное Safari не опорная позиция: фиксированная. Несколько людей работали над реализацией это, в первую очередь Cubiq а также Doctyper. Оба мне не нравятся, поэтому почему я не делаю по умолчанию, но вы можете попытаться сделать расширение, которое его поддерживает -

Лично при работе с материалами, которые нуждаются в фиксированном позиционировании на iPhone, я предпочитаю идти со статическим позиционированием и просто автоматически прокручивать нижнюю/верхнюю область при динамическом изменении содержимого.

Ответ 2

Я столкнулся с той же проблемой более двух недель. И это решение сработало для меня. Просто включите

-webkit-backface-visibility: hidden;

в css элемента вместе с положением: fixed.

Он отлично работает

Ответ 3

Следуя ссылке, которую опубликовал Сэм Шаффрон, кажется, что новая версия iScroll (версия 4) разрешила некоторые проблемы, с которыми Сэм перечислил.

iScroll-4

В дополнение ко всем предыдущим функциям iScroll в версии 4 представлены:

  • Pinch/Zoom
  • Потяните вверх/вниз, чтобы обновить
  • Улучшенная скорость и динамика
  • Привязка к элементу
  • Настраиваемые полосы прокрутки

Я только посмотрел на демо на своем сайте, поэтому я не могу ручаться за него, но он выглядит хорошо!