Исправлено позиционирование для мобильных браузеров - PullRequest
10 голосов
/ 30 июля 2010

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

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

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

Я попробовал, и это хорошо работает. Однако мне было интересно, есть ли единственное решение, которое работает для всех основных мобильных браузеров смартфонов. Примечание: мне не нужно, чтобы нижний колонтитул оставался фиксированным, только верхний колонтитул. Так что это должно облегчить адаптацию для экрана любого размера, так как я бы просто установил верхнюю часть div на 0 на Scroll.

Спасибо!

Ответы [ 3 ]

6 голосов
/ 03 августа 2010

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

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


Старый ответ

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

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

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

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

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

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

2 голосов
/ 17 декабря 2014

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

-webkit-backface-visibility: hidden;

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

Это будет работатьотлично

0 голосов
/ 23 ноября 2011

По ссылке, размещенной Сэмом Саффроном, похоже, что новая версия iScroll (версия 4) решила некоторые проблемы, перечисленные Сэмом.

iScroll-4

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

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

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

...