ВОПРОС: Основываясь на приведенных примерах для веб-приложений домашнего экрана в iOS7 Safari, как я могу добиться как фиксированного постоянного заголовка, который никогда не прокручивается вне поля зрения, так и полей ввода, которые прокручиваются в поле зрения при нажатии?

Два примера имеют одно отличие, один имеетheight=device-height в окне просмотра другой нет.

Без устройства высота

<meta id="viewport" name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1" />

Демо-версия:http://run.plnkr.co/plunks/SU8Csk/

Изменить ссылку:http://plnkr.co/edit/SU8Csk

Хорошо: Фиксированный заголовок не меняет положение / высоту при нажатии на поля.

Плохо: Пользователь не может видеть сфокусированное поле без прокрутки вручную или нажатия кнопки «Далее». Это может быть очень утомительно, особенно если поля на странице не переполняются.

С высоты устройства

<meta id="viewport" name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, minimum-scale=1" />

Демо-версия:http://run.plnkr.co/plunks/rPoyaB/

Изменить ссылку:http://plnkr.co/edit/rPoyaB

Хорошо: Пользователь прокручивается к сфокусированному полю по желанию.

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

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

Вы должны иметь возможность открыть каждый демонстрационный URL в iOS7 Safari, добавить на главный экран и запустить, чтобы продемонстрировать проблему.

Каков наилучший способ решения этой проблемы?

ПРИМЕЧАНИЕ. Мне известно, что в iOS7 Safari есть «ошибки», особенно когда речь идет о веб-приложениях для домашнего экрана, однако я считаю, что может существовать обходной путь, связанный с структурированием страницы. Я провел большое количество исследований (см. Ниже), но я изо всех сил пытаюсь найти решение.

Ссылки по теме «исправленный заголовок»: Нужен фиксированный заголовок в ios7 +, Как получить фиксированный заголовок, чтобы остаться в верхней части страницы?, Исправлены заголовки с текстовыми полями на сайтах мобильных сафари., iOS 5 фиксированное позиционирование и виртуальная клавиатура, Проблемы с фиксированным верхним и нижним колонтитулами и боковой панелью на ipad / iphone, CSS "позиция: фиксированная;" на iPad / iPhone?, Исправлено позиционирование в Mobile Safari, Как мне остановить движение моей фиксированной навигации, когда виртуальная клавиатура открывается в Mobile Safari?, веб-приложение - проблема высоты устройства / клавиатуры, Элемент Div не останется внизу при наличии виртуальной клавиатуры ios 7, Веб-приложение для iOS: отключите автофокус на поле ввода текста, фиксированный заголовок исчезающей позиции в мобильном сафари ios7, http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/, https://github.com/jquery/jquery-mobile/issues/5532, http://dansajin.com/2012/12/07/fix-position-fixed/

Ссылки по теме «поля ввода не фокусируются»: Формы прокрутки webkit переполнены в полноэкранном веб-приложении iOS 7, Проблема с событиями прокрутки Safari для мобильных устройств iOS 7 на клавиатуре вверх и вниз, IOS7 проблемы с фокусом веб-просмотра при использовании клавиатуры HTML, Как мне сфокусировать текстовое поле HTML на iPhone (чтобы клавиатура всплыла)?, Текстовое поле автофокуса Mobile Safari, браузер iPad требует дополнительного нажатия после добавления ввода, Нажатие поля ввода текста на iPhone вызывает клавиатуру, но при наборе текста текст не вставляется, `-webkit-overflow-scrolling: touch` не работает для изначально неэкранных элементов в iOS7, http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html, http://calendee.com/ios-7-kills-forms-in-html5-apps/