从 iPhoneX PWA 接入判断案例

Question

我现在正在 iPhoneX 上测试 PWA。我的网络应用程序的用户界面位于页面的大部分底部，但在 iPhoneX PWA 中，这些用户界面与 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.
}

从 iPhoneX PWA 接入判断案例

Judging the case accessing from iPhoneX PWA

mobile-safari

progressive-web-apps