iPhone X 'подбородок' заставляет приложение Cordova не использовать пространство

Question

Почти закончил сборку приложения в Cordova, когда во время тестирования я заметил, что у iPhone X (и я буду изображать другие модели, основанные на том же дизайне) есть проблема, когда фиксированные меню не сдвигаются полностью, даже при :

position: fixed;
bottom: 0;
left: 0; 

Кто-нибудь еще сталкивался с этой проблемой? Я реализовал:

<meta name=”viewport” content=”initial-scale=1, width=device-width, height=device-height, viewport-fit=cover”>

Я прочитал, что viewport-fit = cover устраняет некоторые аспекты этой проблемы, но не все, как вы можете видеть здесь в фиксированном меню:

Любая помощь приветствуется.

Answer 1

Вы можете попробовать использовать значения safe-area-inset-bottom:

.fixed-menu-thingy {
  bottom: 0;
  margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
  margin-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */
  position: fixed;
}

Здесь есть статья, описывающая значения safe-area-inset-<xxx>: https://webkit.org/blog/7929/designing-websites-for-iphone-x/