iPad разделить представление в HTML, как Gmail / Ymail?

Question

Как все мы знаем, iPad не поддерживает элемент <frame>, но и Gmail, и Ymail могут сделать нечто подобное, создав стиль 2 панели, а панель навигации (левая) может прокручиваться (в стиле ipad). Могу ли я спросить, есть ли у кого-нибудь идея, как он создан?

Большое спасибо.

Answer 1

Я протестировал несколько своих собственных приложений, которые были собраны во времени с помощью Frames. Все они работали "нормально". Вы уверены, что не использовали неправильный Doctype для своего HTML?

Answer 2

Отдельные элементы блока с overflow-y:scroll прокручиваются на iPad двумя пальцами. Так оно и есть.

Так как же Gmail делает это по-другому? Вручную, с помощью JavaScript, реагируя на различные сенсорные события.

На данный момент лучше всего использовать iScroll . Раньше это было немного не гладко (по сравнению с Gmail и другими реализациями), но последняя версия действительно хороша. Попробуйте их демо .

Он работает на iPad / iPhone, Android, и вы даже можете использовать его в обычном браузере с помощью мыши. Он имеет приятный эффект упругости, когда вы достигаете верхней / нижней части прокручиваемой области, и у него есть индикатор прокрутки в стиле iOS, который появляется справа во время прокрутки. Это почти так же гладко, как прокрутка в нативном приложении.

Между прочим, если вы хотите изучить источник веб-сайта для iPad, проще всего использовать Safari (я пробовал это на 5.0.3 для Mac, но, вероятно, работает и на других платформах). Включите меню «Разработка» (Safari> «Настройки»> «Дополнительно»), затем вы можете настроить свой пользовательский агент на iPad.

Вы можете сделать то же самое в Firefox, выдавая себя за iPad, но я часто нахожу сайты совершенно неработающими. Я думаю, это потому, что многие сайты для iPad / Android используют функции Webkit, которых нет в Gecko. Фактически, сайт Apple iPad Guide , который также использует технику двухпанельной прокрутки, просто отклоняет вас, если вы не (а) отправляете строку агента пользователя iOS и (б) не используете Webkit. А в Chrome нет простого способа изменить строку User Agent. Таким образом, Safari - это самый простой способ изучить подобные сайты.

Answer 3

На самом деле я точно не знаю, как они это сделали (мне кажется, я не могу найти мобильную почту Gmail в настольном браузере и не могу найти функцию просмотра источника на своем iPad), но я подозреваю, чточто это не так сложно, как кажется.

Имейте в виду, что в обычном браузере, когда слишком много контента, мы получаем полосу прокрутки.Это не то, как iPad отображает длинные страницы.На iPad, если контента слишком много, мы никогда не получим полосу прокрутки, прокрутка достигается путем перемещения контента вверх и вниз.Итак, мы должны представить, что это две панели с полосами прокрутки, потому что именно так они будут отображаться в обычном браузере.

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

<div>
    {the nav list of emails goes here}
</div>
<div>
    {the currently-open email goes here}
</div>

<style>
div {
    float: left;
    width: 50%;
    overflow-y: scroll;
}
</style>

Там, вероятно, есть что-то причудливое, чтобы каждый div потреблял 100% доступной высоты (это, вероятно, не так просто, как height: 100%), но уже, если любой из div содержитдостаточно контента, мы получим отдельные вертикальные полосы прокрутки, которые iPad будет скрывать, что даст нам этот аккуратный скользящий жест прокрутки.