CSS 类未在 iOS 浏览器中显示，但在 Android 中有效

Question

我正在编写一个带有 facebook 风格聊天窗口的网页。它在浏览器中运行良好，CSS 如下所示:

.chatWindowContainer {
    display: flex;
    flex-flow: column;
    position: absolute;
    bottom: 0px;
    right: 15%;
    margin-left: 10px;
    background-color: white;
    width: 350px;
    box-shadow: 0 20px 20px 5px rgba(0, 0, 0, 0.2),
        0 0px 10px 0 rgba(0, 0, 0, 0.19);
}

对于移动设备，我希望窗口横跨整个屏幕底部。我使用媒体查询:

@media screen and (max-width: 800px) {
    .chatWindowContainer {
        width: 100%;
        right: 0%;
    }
}

在 Chrome 中使用 devtools 并使用设备视口(viewport)时，一切看起来都很好。这也适用于 Android 版 Chrome，但不适用于 Safari、Edge 或 iOS 版 Chrome，我不明白为什么。无论如何我可以检查我是否收到错误消息或类似信息？

Answer 1

我想通了...

我使用使用 Web Speech API 的 react 包“react-speech-recognition”。除了 Chrome 和 Android 版 Chrome 之外，其他任何东西都不支持此功能。当删除我的 WebApp 周围的 SpeechAPI 包装器时，ChatWindow 会出现在 iOS 中。

所以这不是 CSS 的问题，而是 JS 的问题。