Неправильная позиция нижнего колонтитула в приложении iOS с jQuery Mobile

Question

Я разрабатываю приложение, используя PhoneGap и jQuery Mobile.

У меня проблема с нижним колонтитулом. На iPhone это слишком низко, похоже, что строка состояния iphone не учитывается, и запрос «думает», что для всего html больше места.

В двух словах нижний колонтитул 20px слишком низкий (строка состояния 20px в высоту).

<div data-role="footer" data-position="fixed"> 
    <div data-role="navbar" class="main-tab-bar"> 
     <ul><li ...><li ...><li ...><li ...></ul> 
    </div> 
</div> 

на моем компьютере она выглядит хорошо, но когда я положил его на телефоне (как приложение iphone) это неуместно.

Спасибо за любые советы, которые могут указывать на меня в правильном направлении.

Answer 1

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

.ui-page { 
    margin-bottom : 20px; 
} 

Вы также можете ориентировать data-role="content элементы с помощью ui-content класс.

И да, это расстраивает. Удивительно, что Apple не учитывала пользовательский интерфейс Safari Mobile, который означает, что веб-разработчики должны забрать слабину.