Android Web App: Положение: исправлено сломано?

Question

Я в процессе разработки веб-приложения для мобильных телефонов. я пошел с веб-приложениями, потому что мне кажется, выигрышная ситуация необходимость разработки одного приложения, которое может работать также на iPhone / Windows Mobile / Palm и т. Д.

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

Используя CSS, я думаю, это было бы действительно легко сделать. Только используя Положение: фиксированный; внизу: 0; сделал бы трюк, но я нашел он не ведет себя так же в мобильных браузерах

Я попытался разделить свою страницу на 2 раздела: 1 будет прокручиваемым div (для содержания), а другой будет нижнее меню. Прокручиваемые div-ы также не работают на Android. Я также пытался использовать кадры без удачи тоже. Кто-нибудь знает какой-либо способ воссоздать меню что бы придерживаться нижней части страницы для мобильных телефонов?

Answer 1

На моем Android N1 с CyanogenMod у меня тоже была эта проблема и исправление:

   <meta
     name="viewport"
     content="width=100%; 
             initial-scale=1;
             maximum-scale=1;
             minimum-scale=1; 
             user-scalable=no;"
    />

В частности, часть user-scalable=no;, вы также можете поставить 0 вместо no.

Интересно, что это нарушает рендеринг кнопок для Android, но все, что вам нужно сделать, это установить цвет фона для кнопок.

Answer 2

Просто добавьте:

<meta name="viewport" content="width=device-width, user-scalable=no" />

на страницу, и вы настроены для Android 2.2+. Это сработало на странице, которую я тестировал на своем телефоне. Источник: Когда я могу использовать позицию CSS: исправлено?

Answer 3

Это должно работать :) http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

Answer 4

Только что я получил обновление до Android 2.2 (Froyo) на моем HTC Desire, и я рад сообщить, что исправленная позиция теперь работает, по крайней мере, когда вы используете метатег viewport для установки начального масштаба и ширины. Тем не менее, похоже, что он не работает на обычных веб-страницах.

Answer 5

Я подтверждаю, что используя мета-имя в вашем HTML-заголовке

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

у вас будет фиксированный div при прокрутке по вертикали и горизонтали на Android 2.2, 2.3 и выше и iOS 4 и выше. Я сделал пример здесь: https://dl.dropbox.com/u/908148/website/test-scroll.html