Android 2.3 + Phonegap фиксированное позиционирование не работает

В моем приложении Phonegap я пытаюсь разобрать фиксированный нижний колонтитул и заголовок, что на самом деле в Android 4.0 отлично работает. Но на Android 2.3, даже если это выглядит нормально, когда я начинаю прокручивать верхний и нижний колонтитулы, вообще не фиксируется, и вместе с прокруткой.Android 2.3 + Phonegap фиксированное позиционирование не работает

Соответствующий код следует ниже:

HTML:

<div class="container-fluid no-padding"> 
<div id="header"> 

</div> 
<div class="wrapper"> 
    <div id="main-content"></div> 
    <div id="push"></div> 
</div> 
<div id="footer" class="main-footer"> 

</div>

CSS:

html,body,.container-fluid { 
    height: 100%; 
    font-family: Helvetica !important; 
} 

#wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    padding-left: 10px; 
    padding-right: 10px; 
    margin-left: 0; 
    margin-right: 0; 
    margin-bottom: -20px; /* the bottom margin is the negative value of the footer's height */ 
    overflow: scroll; 
} 

#footer, #push { 
    height: 20px; /* .push must be the same height as .footer */ 
    width: 100%; 
} 

#footer { 
    position: fixed; 
    z-index: 10; /* Defect #9 */ 
    margin: 0; 
    bottom:0px; 
} 

#header { 
    position: fixed; 
    z-index: 5; 
    height: 40px; 
    background-color: #FFFFFF; 
    width: 100%; 
    top: 0px !important; 
} 

#main-content { 
    margin-top: 45px; 
} 

.main-footer { 
    background-color: #cf2129; 
    color: #FFFFFF; 
}

Если это уместно, я не использую JQuery Mobile (что большая часть айнсеров, которые я нашел, относятся к), но вместо этого Twitter Bootstrap.

Любое руководство приветствуется

источник

2013-05-10 Luís Lopes

У меня проблема с аналогичной проблемой в настоящее время - а именно с Android 4.2 и телефонным разворотом 2.7. Я думаю, что добавлю код позже –

Я нашел его,

Просто добавьте «пользователь-масштабируемой = 0» в мета-теге видового экрана.

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

Источник: http://bradfrostweb.com/blog/mobile/fixed-position/

Он говорит все, что вам нужно знать о неподвижных элементов и мобильных браузеров :)

источник

2013-05-16 15:31:26

Lopes- Nice work. – Mkpatel

Спасибо. Это просто, что я ищу. – harsha

Не совсем лучшее решение, хотя, поскольку вы торгуете одной функциональностью для другой. Теперь пользователь не может масштабировать любой контент вашего сайта на мобильных устройствах. У кого-то еще есть масштабируемое решение этой проблемы? –

Это своего рода вопросы, я имею, когда я разрабатывал PhoneGap Application.Sometimes его PhoneGap версия не compitable с андроида version.So его создать проблемы, но я столкнулся подобного рода проблемы в прошлом. Что я сделал, вместо того, чтобы указывать id для класса использования div. подобный

<div class="header"> 
</div>

и для использования класса css вместо id.

.header 
{ 
    position:fixed; 
}

Я знаю, что это кажется очень странным, забавным ответом. Не стоит вообще. но эта работа для меня. Вот почему я делюсь с вами.

источник

2013-05-11 05:13:18 Mkpatel

Это не сработало для меня :( –

o_O вы шутите? –

Я , кажется нашли простое исправление для Android 2.2 и 2.3. Просто добавьте:

-webkit-backface-visibility: hidden; Элемент, на котором вы используете фиксированное позиционирование.

Более подробно о том, что здесь: http://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/

Не тестировал исчерпывающе так, дайте мне знать, если он не работает для вас. Live URL для тестирования здесь: http://codepen.io/benfrain/full/wckpb

источник

2014-01-17 09:49:44

Android 2.3 + Phonegap фиксированное позиционирование не работает

ответ

Смежные вопросы