Как создать нижний колонтитул / панель инструментов в веб-приложении iPhone?

Question

Я работаю над веб-приложением, и мне нужно, чтобы div прилип к нижней части области просмотра Всегда видимый и всегда внизу окна просмотра. Вот пример того, что я хочу здесь: нижний колонтитул . К сожалению, это не работает на iPhone. Я могу думать о некоторых способах сделать это с помощью JavaScript, но я бы не стал. Любые идеи о том, как получить этот эффект на iPhone, используя только CSS?

Answer 1

Эта ситуация изменилась с iOS 5. Теперь вы можете использовать overflow:scroll или position:fixed, и он будет делать то, что ожидается. Например, этот тип кода:

<header style="
    position: fixed; top: 0; left: 0;
    width: 100%; height: 20px; font-size: 20px">
    Heading
</header>
<article style="margin: 20px 0">
    Your page here
</article>
<footer style="
    position: fixed; bottom: 0; left: 0;
    width: 100%; height: 20px; font-size: 20px">
    Footer
</footer>

... должно работать без проблем. Хотя все еще есть много устройств, работающих под управлением более старых версий iOS, вам может потребоваться медленная загрузка Прокрутка на старых устройствах, которые можно протестировать с помощью этого javascript:

var isios = navigator.appVersion.match(/CPU( iPhone)? OS ([0-9]+)_([0-9]+)(_([0-9]+))? like/i);
// if that succeeds, it usually returns ["CPU OS X_Y_Z like",undefined,X,Y,Z]
if (isios && isios[2] < 5){
    // load scrollability here. jquery example:
    $.getScript("/js/scrollability.min.js", function() {
        // code to run when scrollability's loaded
    }
}

Answer 2

Вы не можете. По крайней мере, не так, как вы думаете.

Вы должны притворяться, что все это - JavaScript. Используйте что-то вроде iScroll

Это отстой, но Mobile Safari вообще не поддерживает фиксированное позиционирование. Таким образом, вы должны сделать размер страницы равным размеру экрана, а затем использовать javascript для обработки касаний и установки смещения прокрутки и анимированных полос прокрутки, а не вручную.

Этот скрипт, который я связал, многое для вас делает, но он не так надежен, как нативное решение.

Answer 3

Для этого есть новый JavaScript, который работает намного проще: http://joehewitt.github.com/scrollability/

Поэтому в iOS 5 будут доступны фиксированная позиция и прокрутка переполнения!

Answer 4

Вот рабочий пример с кодом. Это не для слабонервных:

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

Answer 5

Вот пример того, как объединить CSS3, HTML и JavaScript для создания панели навигации для iPhone. http://www.mindovercode.com/2010/09/12/iphone-navbar-using-xui/

ps: работает в ландшафтном режиме.