css - iPhone X 'chin' 导致 Cordova 应用程序无法利用空间

Question

当我在测试过程中注意到 iPhone X(我会想象基于相同设计的其他型号)有一个问题时，在 Cordova 中几乎完成了一个应用程序的构建，即使使用:

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值(value)观:

.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/