Firefox иногда не отображает изображение полностью в полноэкранном режиме - PullRequest
0 голосов
/ 11 февраля 2019

В данный момент я пытаюсь отобразить изображение в полноэкранном режиме с помощью JavaScript.(Полноэкранный API - https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)

Код JavaScript:

var enterFullscreen = function(el) {
if(el.requestFullscreen) {
    el.requestFullscreen();
} else if(el.msRequestFullscreen) {
    el.msRequestFullscreen();
} else if(el.mozRequestFullScreen) {
    el.mozRequestFullScreen();
} else if(el.webkitRequestFullscreen) {
    el.webkitRequestFullscreen();
} else {
    noFullscreenSupport();
}

var exitFullscreen = function() {
if(document.exitFullscreen) {
    document.exitFullscreen();
} else if(document.msExitFullscreen) {
    document.msExitFullscreen();
} else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
} else {
    noFullscreenSupport();
}

var initFullScreenButtons = function() {
$('.fullScreenButton').each(function(e) {
    $(this).bind('click', function() {
        if((window.innerWidth === screen.width && window.innerHeight === screen.height) || (window.fullScreen)) {
            exitFullscreen();
        } else {
            enterFullscreen(document.documentElement);
        }   
    });
});

Я получаю полноэкранные кнопки и связываю их с событием щелчка, которое вызывает функцию для входа в полноэкранный режим.

Изображения:

Без полноэкранного режима

Во весь экран

В результате изображение иногда отображается в полноэкранном или в полноэкранном режиме.полу-полноэкранный, где фон страницы отображается внизу страницы с шириной / высотой панели задач браузера и панели задач windows.

Кроме того, как только я пытаюсь использовать инструмент разработчикабраузера исчезает визуальная ошибка.

1 Ответ

0 голосов
/ 11 февраля 2019

Я нашел решение для моей проблемы.Вместо передачи document.documentElement (корневой элемент) я должен передать функции document.body (body-element).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...