Как вернуться из полноэкранного режима в Chrome Mobile - PullRequest
Новая
       16

Как вернуться из полноэкранного режима в Chrome Mobile

0 голосов
/ 24 мая 2018

У меня проблема с возвратом из полноэкранного режима в Chrome Mobile.Я нашел несколько полноэкранных примеров и добавил одну функцию.Когда браузер находится в полноэкранном режиме, рамка изображения имеет красный цвет. 

#root:-webkit-full-screen  > .img-wrap > .img-01
{
    border: 2px solid red;
}

Пример приложения вы можете найти здесь: https://codepen.io/herrmefisto/pen/eraKKg

Если вы нажмете кнопку, оно откроется в полноэкранном режиме.и граница изображения будет красной.Если вы нажмете кнопку «Esc», то граница будет по-прежнему красной!На реальном устройстве Android Esc == кнопка возврата.

Я также обнаружил, что события: webkitfullscreenchange, mozfullscreenchange, fullscreenchange, MSFullscreenChange не запускаются при нажатии кнопки Esc на клавиатуре.

Есть несколько библиотек (кросс-браузер), например eq BigScreen (https://brad.is/coding/BigScreen/), но эта ошибка существует и здесь.

Кто-нибудь знает, как сделать какой-нибудь хак / обходной путь, чтобы он работал?

В настольном Chrome(ver 66) работает нормально.

1 Ответ

0 голосов
/ 26 мая 2018

Полноэкранный режим недоступен в фрагменте SO, поэтому я сделал fork вашей версии на codepen.io с изменениями метода exitHandler.Из этого: 

function exitHandler() {
    if (
       !document.webkitIsFullScreen 
       && !document.mozFullScreen 
       && !document.msFullscreenElement) {
        console.log("asdasd");
    }
}

до этого: 

function exitHandler() {
    if (
        document.webkitIsFullScreen === false 
        || document.mozFullScreen === false 
        || document.msFullscreenElement === false
    ) {
        alert("exit fullscreen");
    }
}

На моем устройстве Android (не Samsung Galaxy A5) с Chrome v.66.0.3359.158 в полноэкранном режиме на клавише Esc нажмите оповещениеотображается, поэтому происходит событие выхода «webkitfullscreenchange».Цвет границы изображения также изменяется после выхода из полноэкранного режима.

Но в Google Chrome для Windows v.66.0.3359.181 на панели инструментов устройства ни одно из устройств не запускает событие выхода из полноэкранного режима.Но если вы выбираете «Отзывчивый», то все в порядке с любым размером экрана.Если никто не написал об этом , то вам следует это сделать.

...