Question

目前，我正尝试通过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);
        }   
    });
});

我获得了全屏按钮，并将它们绑定到一个点击事件，该事件会调用该函数进入全屏状态。

图片：

Without fullscreen

Fullscreen

结果是图像有时以全屏或半全屏显示，其中页面背景以浏览器任务栏和Windows任务栏的宽度/高度显示在页面底部。

此外，当我尝试使用浏览器的开发人员工具时，视觉错误便消失了。

Answer 1

我找到了解决问题的方法。不必传递document.documentElement（根元素），我必须传递document.body（body-element）到函数。

Firefox有时无法完全显示全屏图像

1 个答案: