ВОПРОС: На основе приведенных примеров для домашних веб-приложений в 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 в Safari iOS7, добавлять на главный экран и запускать, чтобы продемонстрировать проблему.
Каков наилучший способ разрешить это?
ПРИМЕЧАНИЕ. Я знаю, что в 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-overflow, разбитые на полноэкранное веб-приложение iOS 7, Проблема с iOS 7 Mobile Safari Прокрутка событий на клавиатуре вверх и вниз, Проблемы с 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/
