Блог

Главная - Вопросы по программированию - Класс CSS не отображается в браузерах iOS, но работает в Android

Класс CSS не отображается в браузерах iOS, но работает в Android

#css

#css

Вопрос:

Я пишу веб-страницу с окном чата в стиле 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%;
    }
}

При использовании devtools в Chrome и использовании окна просмотра устройства все также выглядит нормально. Это также работает в Chrome для Android, но не работает в Safari, Edge или Chrome для iOS, я не могу понять, почему. Могу ли я в любом случае проверить, получаю ли я сообщения об ошибках или тому подобное?

Ответ №1:

Я понял это…

Я использую пакет react «react-speech-recognition», который использует Web Speech API. Это НЕ поддерживается ни в чем, кроме Chrome и Chrome для Android. При удалении SpeechAPI-оболочки вокруг моего веб-приложения окно чата отображается в iOS.

Так что это была проблема не с CSS, а скорее с JS.