判断从iPhoneX PWA访问的情况

Question

我现在正在iPhoneX上测试PWA。 我的网络应用程序的UI位于页面的最底部，但在iPhoneX PWA中，这些UI与iOS的擦除手势相冲突。

所以，仅在iPhoneX的PWA案例中，我想将这些UI放在上面。 如何在客户端判断从iPhoneX PWA访问的案例？

Answer 1

我通过使用“display-mode”，“width”和“height”媒体查询找到了1个解决方案：

@media screen and (display-mode: standalone) and (width: 375px) and (height: 768px),
  screen and (display-mode: standalone) and (width: 724px) and (height: 375px),
  screen and (display-mode: fullscreen) and (width: 375px) and (height: 768px),
  screen and (display-mode: fullscreen) and (width: 724px) and (height: 375px) {
    // put css code for iPhoneX PWA here.
}