twilio - Twilio 视频：如何在桌面上呈现移动布局

Question

我正在为我的视频应用程序使用Twilio Video React应用程序。Twilio 视频基于设备在桌面和移动两个视图中呈现视频。由于我的桌面应用程序的空间限制，我想在桌面上呈现类似于移动设备的视频，这可能吗？我可以设置一个变量来允许我这样做吗？基本上，我希望 Twilio 视频认为我正在移动设备上运行该应用程序。

我尝试在 utils 中将 isMobile 设置为 true（如下所示），这似乎对 UI 没有影响。

export const isMobile = (() => {
  if (
    typeof navigator === "undefined" ||
    typeof navigator.userAgent !== "string"
  ) {
    return true; 
  }
  return /Mobile/.test(navigator.userAgent);
})();

我想实现以下目标：

Answer 1

Twilio 开发人员布道者在这里。

我自己没有在这个应用程序上工作过，所以我不熟悉它的样式。虽然没有用于在移动设备上设置样式的变量，但它主要由 CSS 媒体查询断点控制。

您会在代码中注意到 CSS 嵌入在 JavaScript 中。您还会发现以下行：

[theme.breakpoints.down('xs')]: {
  // styles
}

该断点定义了许多样式应该如何在小屏幕尺寸下工作。因此，如果您删除断点并将断点内的样式用作默认样式，则应用程序将在移动版本中布局。

完成此操作后，您可以将应用程序的视频部分放置在您定义的宽度的 div 中，并将应用程序的其余部分放置在它周围。

让我知道这是否有帮助。