Как исправить этот липкий нижний колонтитул для устройств Android в PHONE GAP?

Я работаю в Phone Gap. Я исправил нижний колонтитул, это работает для некоторых устройств и не работает для некоторых устройств.

HTML-КОД для FOOTER

 <div id="footer" style="background-image:url(img/bottom_bar.png);" class="footer">
    <div id="footer_text" class="footer_text">footer</div>
    <div id="info" class="info noSelect"><img src="img/info.png"/></div>
 </div>

CSS для FOOTER

.footer
{
   width:100%;  position:fixed; bottom:0; font-size:11px; color:#FFFFFF; text-align:center; height:30px;
}
.footer_text
{
    text-indent:1%; float:left; text-align:center;  width:75%;  margin-top:2%;
}   

Для некоторых устройств он находится внизу экрана ... несмотря на переполнение содержимого, а для некоторых устройств он перемещается вместе с содержимым.

РЕДАКТИРОВАТЬ:

По совету сэра Филиппоса Карапетиса я попытался реализовать iscroll4

Я использовал этот javascript из здесь

и инициализировал прокрутку

    document.addEventListener("deviceready", onDeviceReady, false);
    function scroll() 
    {
        myScroll = new IScroll('.wrapper', { mouseWheel:true });
    }
    -----
            -----
          function onDeviceReady() 
    {   
        scroll();
                ----
                ----

CSS нижнего колонтитула

.footer
{
   width:100%;  position:fixed; bottom:0; font-size:11px; color:#FFFFFF; text-align:center; height:30px;
}
.footer_text
{
    text-indent:1%; float:left; text-align:center;  width:75%;  margin-top:2%;
}   

Проблема в том, что он прокручивается только один раз


person user    schedule 06.06.2013    source источник


Ответы (1)


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

http://bradfrostweb.com/blog/mobile/fixed-position/

Эта страница также включает решения, основанные на Javascript, чтобы обойти эту ошибку на этих устройствах, переопределив поведение прокрутки браузеров по умолчанию. Например, в jQuery Mobile фиксированные элементы исчезают при прокрутке страницы, а затем снова исчезают, когда прокрутка заканчивается.

Самым прямым решением вашей проблемы, которое также имеет наименьший размер (по сравнению с использованием полномасштабного фреймворка), является iScroll 4:

http://cubiq.org/iscroll-4

Вот небольшой обзор со страницы iScroll 4:

iScroll 4 - это полная переработка исходного кода iScroll. Разработка скрипта началась потому, что мобильный webkit (на iPhone, iPad, Android) не предоставляет собственный способ прокрутки контента внутри элемента с фиксированной шириной / высотой. Эта неудачная ситуация не позволяет любому веб-приложению иметь абсолютный верхний и / или нижний колонтитул и центральную область прокрутки для содержимого.

Хотя последние версии Android поддерживают эту функцию (хотя поддержка не оптимальна), Apple, похоже, не хочет добавлять прокрутку одним пальцем в div.

person Filippos Karapetis    schedule 06.06.2013
comment
Итак, сэр, мне кажется, даже эта проблема здесь из-за той же проблемы. ВАШИ предложения по этому вопросу тоже. ПОЖАЛУЙСТА. - person user; 06.06.2013
comment
Я понимаю, что вы пытаетесь передать. Точно, это работает с версией Android 4 и не работает с версией Android 2. ВЫ ХОТИТЕ сказать, использую ли я iscroll4. это будет лучше? Разве у меня нет другого варианта, кроме iScroll4? ТАК И НЕТ ДРУГОЙ АЛЬТЕРНАТИВЫ. - person user; 06.06.2013
comment
Ну, вы пытаетесь создать фиксированный элемент (нижний колонтитул). Некоторые мобильные браузеры работают с фиксированными элементами с ошибками, и вы мало что можете с этим поделать. Вы можете поддерживать только устройства без ошибок или использовать решение Javascript (например, iScroll 4 или подобное), которое было создано именно для этой цели. Боюсь, я не знаю альтернативного способа исправить это ошибочное поведение браузера без Javascript. Другой вопрос, с которым вы связались, не имеет отношения к тому, что вы пытаетесь сделать. - person Filippos Karapetis; 06.06.2013
comment
Другой вопрос также связан с прокруткой и использует следующий CSS no-repeat fixed center top. ПОЧЕМУ Я СПРОСИЛ ВАС, ИЗ-ЗА ПОВЕДЕНИЯ МОБИЛЬНЫХ БРАУЗЕРОВ. - person user; 06.06.2013
comment
Пожалуйста, не пишите заглавными буквами, это означает КРИК, который раздражает. Другой вопрос, который вы задаете, совсем другой: в этом вопросе вы пытаетесь расположить элемент внизу экрана. В другом вопросе вы пытаетесь растянуть фоновое изображение внутри контейнера, а это совсем другое дело. Как ответил @ ralph.m на другой вопрос, установка для вашего фонового изображения фиксированной центральной вершины без повтора нарушена, и она не будет работать так, как вы хотите, во всех мобильных браузерах. Кажется, вам не нравится решение Javascript, даже если оно решает вашу проблему. Почему? - person Filippos Karapetis; 06.06.2013
comment
Извините, сэр, я хотел выделить свои вопросы, поэтому я использовал заглавные буквы. Вероятно, я мог бы сделать это, используя жирный шрифт. Да, сэр, я сомневаюсь в использовании iscroll4, а еще я новичок в языке JavaScript. Я изучаю его через домен phone gap. однажды я попытался реализовать iscroll4, но безуспешно. Так страшно использовать его. Я пробовал использовать его для изображения, упомянутого в другом моем вопросе. ну, теперь у меня, кажется, нет другого выхода, кроме этого. Сэр, у меня есть еще одно сомнение. Когда я использую этот iscroll4, какое положение CSS в моем нижнем колонтитуле должно быть фиксированным или абсолютным? - person user; 06.06.2013
comment
Сэр, этот свиток мне не помогает. - person user; 06.06.2013
comment
Вы не предоставили никакого кода, поэтому я боюсь, что невозможно понять, что не так, без соответствующего jsFiddle, где вы можете показать нам, в чем проблема. - person Filippos Karapetis; 06.06.2013
comment
Сэр, после n прокруток он прокручивается только один раз. Могу ли я сделать какие-либо другие изменения? - person user; 07.06.2013
comment
Прости, ты потерял меня ... что ты имеешь в виду, что он прокручивается только один раз? Не можете ли вы снова прокрутить содержимое? - person Filippos Karapetis; 07.06.2013
comment
Нет, сэр, он прокручивается только один раз. После этого страница становится статичной. После большого усилия прокручивается один раз - person user; 07.06.2013
comment
сэр, вы можете найти мой точный код здесь - person user; 07.06.2013
comment
Спасибо, сэр .. Фо, помог мне понять, что CSS position:fixed не поддерживается более низкими версиями Android, и за помощь в работе с iscroll. - person user; 14.06.2013