如何仅在移动设备上运行全屏模式?

时间:2018-07-21 16:10:59

标签: javascript jquery html css html5

我想以全屏模式从移动设备查看我的网站,我检查它是否是使用CSS的移动设备:

@media screen and (max-width: 767px){

}

或使用Javascript

var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {

}

我尝试了一些Javascript解决方案,例如:

function maxWindow() {
        window.moveTo(0, 0);


        if (document.all) {
            top.window.resizeTo(screen.availWidth, screen.availHeight);
        }

        else if (document.layers || document.getElementById) {
            if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
                top.window.outerHeight = screen.availHeight;
                top.window.outerWidth = screen.availWidth;
            }
        }
}

和:

document.documentElement.webkitRequestFullScreen();

当按f11键时,此解决方案似乎仅在台式机上有效:

function requestFullScreen(element) {
    // Supports most browsers and their versions.
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

    if (requestMethod) { // Native full screen.
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}

var elem = document.body; // Make the body go full screen.
requestFullScreen(elem);

也尝试过:

 window.open(theURL, '', 'fullscreen=yes, scrollbars=auto');

但是这些都不行。

该怎么做?还是不可能?

0 个答案:

没有答案