Мобильное сафари против веб-приложения домашнего экрана

Question

Я разрабатываю веб-приложение для iOS, и я заметил некоторые странные вещи между запуском в мобильном сафари и запуском с домашнего экрана.

Существуют ли какие-либо ресурсы, обеспечивающие общий интерфейс для перехода между режимами?

Если нет, есть ли какие-либо ресурсы, детализирующие все различия и ошибки между двумя режимами?

Вещи, с которыми я столкнулся:

Длинный опрос довольно странный. См. этот пример .

window.innerWidth & window.innerHeight несовместимы.

• Mobile Safari - вертикальная ориентация работает как положено, горизонтальная - нет
  • Вертикальная
    • ширина- 768
    • высота- 946
  • Горизонтальный
    • ширина- 769 ??
    • высота- 518 ??
• Веб-приложение на рабочем столе - это всегда имеет смысл.
  • Вертикальная
    • ширина- 768
    • высота- 1004
  • Горизонтальный
    • ширина- 1024
    • высота- 748

Дополнительные материалы:

Я нашел это и это , чтобы быть интересным.

Этот вопрос также проливает свет на странное поведение.

Answer 1

Я не думаю, что Apple публично документировала атрибуты полноэкранных веб-приложений в iOS, поэтому все, что вы обнаружите, может быть анекдотичным и, следовательно, недостаточно надежным, чтобы зависеть от будущих выпусков.

Возможно, вам удастся создать приложение, в котором есть только UIWebView, отображающий ваше веб-приложение. Режимы просмотра для приложений iOS четко определены и хорошо документированы, и приложение может предоставлять другие функции, которые могут вам понадобиться в будущем (например, локальные уведомления, фоновое выполнение, пользовательские обработчики URL-адресов).

Answer 2

При использовании

<meta name="viewport" content="user-scalable = no, width = device-width" />

вы получите свои window.innerWidth's !!!

При использовании

<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width" />

Вы получите >> пейзаж: 1024 x 690 и портрет: 768 x 946 (режим «сафари»)

Answer 3

Существует четыре параметра, которые Apple поддерживает в приложениях на главном экране: значок, заставка, скрытие панели инструментов и настройка режима строки состояния.

См. https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW3.

Answer 4

Если вы создаете приложение для мобильных устройств, вы можете взглянуть на Sencha Touch , который снимает головную боль при управлении нюансами в мобильных устройствах.

Тогда вы можете просто создать свое обычное веб-приложение рядом с ним.