CONTENT

网上有许多关于网页在手机浏览器上全屏的方式,这里使用了一种比较能够通用的方式。

使用的时候将下面的代码保存为一个js文件,然后引入html就可以起作用。

/**
 * 提示用户浏览器全屏
*/
var Adapter = /** @class */ (function () {
    function Adapter() {
        this.slideTagHeight = 0;
        this.isShowSlide = false;
        this.browserType = null;
        this.winInit();
    }
    Adapter.prototype.winInit = function () {
        // document.getElementById("layaContainer").style.position = "absolute";
        // document.getElementById("layaContainer").style.width = "100%";
        // document.getElementById("layaContainer").style.height = "100%";
        var e = this;
        e.browserDistinguish();
        window.onresize = function () {
            e.rotationTip();
        };
        setTimeout(function () {
            e.rotationTip();
        }, 150),
            setInterval(function () {
                e.update();
            }, 300);
    };
    Adapter.prototype.fullScreen = function () {
        switch (this.browserType) {
            case "Chrome":
                console.log("fullScreen Chrome"), document.webkitIsFullScreen ? this.RemoveTouchEvent() : (this.viewInCenter(), this.AddTouchEvent(!0));
                break;
            case "360Browser":
                Laya.stage.fullScreenEnabled ? document.getElementById("layaContainer").style.left = "0" : this.viewInCenter();
                break;
            case "Opera":
                break;
            case "LieBao":
                document.webkitIsFullScreen ? this.RemoveTouchEvent() : (this.viewInCenter(), this.AddTouchEvent(!0));
                break;
            case "UC":
                Laya.stage.fullScreenEnabled ? document.getElementById("layaContainer").style.left = "0" : (this.viewInCenter(), Laya.stage.fullScreenEnabled = true);
                break;
            case "XiaoMi":
                window.innerHeight >= 350 ? this.slideHide() : this.slideShow();
                break;
            case "Firefox":
                document["fullscreen"] || document.webkitIsFullScreen || document["mozFullScreen"] ? this.RemoveTouchEvent() : (this.viewInCenter(), this.AddTouchEvent(!0));
                break;
            case "Sarfari":
                window.scrollTo(0, 1),
                    window.innerWidth < window.innerHeight ?
                        window.innerHeight <= document.documentElement.clientHeight ?
                            this.slideShow() : this.slideHide() :
                        window.innerHeight >= document.documentElement.clientHeight ?
                            this.slideHide() : this.slideShow(), window.scrollTo(0, 0);
                break;
            case "IOSChrome":
                window.innerWidth < window.innerHeight ? screen.height - window.innerHeight <= 50 ? this.slideHide() : this.slideShow() : screen.width - window.innerHeight <= 20 ? this.slideHide() : this.slideShow();
                break;
            case "IOSUC":
                screen.width - window.innerHeight <= 90 ? this.slideHide() : this.slideShow();
                break;
            case "IOSQQBrowser":
                screen.width <= window.innerHeight ? this.slideHide() : this.slideShow();
                break;
            case "Sogou":
                break;
            case "IOSFirefox":
                window.innerWidth < window.innerHeight ? screen.height - window.innerHeight <= 20 ? this.slideHide() : this.slideShow() : screen.width - window.innerHeight <= 20 ? this.slideHide() : this.slideShow();
                break;
            case "IOSBaidu":
                screen.width <= window.innerHeight ? this.slideHide() : this.slideShow();
                break;
            case "Baidu":
                this.viewInCenter();
                break;
            case "IOSSogou":
                screen.width - window.innerHeight <= 20 ? this.slideHide() : this.slideShow();
        }
    };
    Adapter.prototype.rotationTip = function () {
        "IOSSogou" == this.browserType ? this.AddTouchEvent(!1) :
            "PlusSarfari" != this.browserType &&
                "IOSChrome" != this.browserType && window.scrollTo(0, 0);
        this.fullScreen(), this.createSlide(), document.getElementById("slide") && this.isShowSlide && this.adaptSlidGif();
    };
    Adapter.prototype.update = function () {
        "PlusSarfari" == this.browserType &&
            (window.innerWidth, window.innerHeight,
                window.innerWidth < window.innerHeight ? window.innerHeight <= document.documentElement.clientHeight ? this.slideShow() : this.slideHide() :
                    window.innerHeight < document.documentElement.clientHeight ? this.slideShow() : this.slideHide());
    };
    Adapter.prototype.viewInCenter = function () {
    };
    Adapter.prototype.browserDistinguish = function () {
        var e = this, t = navigator.userAgent;
        ["Android"] == t.match("Android") ||
            navigator.platform.indexOf("Linux aarch") > -1 ?
            (t.indexOf("AppleWebKit") > -1 &&
                -1 == t.indexOf("LieBao") &&
                -1 == t.indexOf("OPR") &&
                -1 == t.indexOf("UCBrowser") &&
                -1 == t.indexOf("MiuiBrowser") &&
                (e.browserType = "Chrome", t.indexOf("45.0.") > -1 && (e.browserType = "360Browser")),
                t.indexOf("OPR") > -1 && (e.browserType = "Opera"),
                t.indexOf("LieBao") > -1 && (e.browserType = "LieBao"),
                t.indexOf("UCBrowser") > -1 && (e.browserType = "UC"), //   cc.view.enableRetina(!0)),
                t.indexOf("MiuiBrowser") > -1 && (e.browserType = "XiaoMi"),
                t.indexOf("Firefox") > -1 && (e.browserType = "Firefox"),
                t.indexOf("SogouMobileBrowser") > -1 && (e.browserType = "Sogou"),
                t.indexOf("baidubrowser") > -1 && (e.browserType = "Baidu")) :
            "iPhone" != navigator.platform && "iPad" != navigator.platform ||
                (["MicroMessenger"] == t.match(/MicroMessenger/i) ?
                    e.browserType = "WeChatBrowser" :
                    t.indexOf("QBWebViewType") >= 185 ?
                        e.browserType = "QQMicroBrowser" :
                        (t.indexOf("AppleWebKit") > -1 &&
                            (e.browserType = "Sarfari", screen.width > 375 && (e.browserType = "PlusSarfari")),
                            t.indexOf("MQQBrowser") > -1 &&
                                (e.browserType = "IOSQQBrowser"),
                            t.indexOf("CriOS") > -1 &&
                                (e.browserType = "IOSChrome", e.slideTagHeight = 400),
                            t.indexOf("QihooBrowser") > -1 &&
                                (e.browserType = "IOS360Browser"),
                            t.indexOf("SogouMobileBrowser") > -1 &&
                                (e.slideTagHeight = 200, e.browserType = "IOSSogou"),
                            t.indexOf("FxiOS") > -1 &&
                                (e.slideTagHeight = 500, e.browserType = "IOSFirefox"),
                            t.indexOf("baidubrowser") > -1 &&
                                (e.browserType = "IOSBaidu"),
                            t.indexOf("UCBrowser") > -1 &&
                                (e.browserType = "IOSUC"), e.createSlide()));
    };
    Adapter.prototype.slideHide = function () {
        if (this.isShowSlide) {
            this.isShowSlide = false;
            var e = document.getElementById("slideBg");
            e && (e.style.display = "none",
                document.getElementById("layaContainer").style.opacity = "1"),
                this.RemoveTouchEvent();
        }
    };
    Adapter.prototype.fullScreenCb = function () {
        document.body.requestFullscreen ? document.body.requestFullscreen() :
            document.body.webkitRequestFullScreen ? document.body.webkitRequestFullScreen() :
                document.body["mozRequestFullScreen"] && document.body["mozRequestFullScreen"](),
            document.getElementById("layaContainer").style.left = "0",
            document.getElementById("layaContainer").style.top = "0",
            "IOSChrome" != this.browserType && window.setTimeout(function () {
                window.scrollTo(0, 0);
            }, 300);
    };
    Adapter.prototype.AddTouchEvent = function (e) {
        navigator.userAgent.indexOf("Browser_Type/Android_APP") <= -1 &&
            (e ? document.body.addEventListener("touchend", this.fullScreenCb.bind(this), true) :
                document.body.addEventListener("touchend", function () {
                    window.scrollTo(0, 0);
                }, true));
    };
    Adapter.prototype.RemoveTouchEvent = function () {
        navigator.userAgent.indexOf("Browser_Type/Android_APP") <= -1 &&
            document.body.removeEventListener("touchend", this.fullScreenCb.bind(this));
    };
    Adapter.prototype.slideShow = function () {
        if (!this.isShowSlide) {
            var e = screen.width;
            window.innerWidth < window.innerHeight && (e = screen.height),
                document.documentElement.scrollHeight < document.documentElement.clientHeight &&
                    (document.body.style.height = e + 100 + this.slideTagHeight + "px"),
                this.isShowSlide = true;
            var t = document.getElementById("slideBg");
            t || (this.createSlide(), t = document.getElementById("slideBg")),
                this.adaptSlidGif(),
                t.style.display = "inline",
                document.body.style.backgroundColor = "black",
                document.getElementById("layaContainer").style.opacity = "0.2";
            this.AddTouchEvent(true);
        }
    };
    Adapter.prototype.adaptSlidGif = function () {
        var e = document.getElementById("slide"), t = 0.5 * document.documentElement.clientWidth;
        e.style.width = t + "px", e.style.height = 142 / 334 * t + "px", e.style.top = 0.1 * document.documentElement.clientHeight + "px";
        var i = screen.width;
        window.innerWidth < window.innerHeight &&
            (i = screen.height), document.documentElement.scrollHeight < document.documentElement.clientHeight &&
            (document.body.style.height = i + 100 + this.slideTagHeight + "px");
    };
    Adapter.prototype.createSlide = function () {
        if (!document.getElementById("slide")) {
            var e = document.createElement("div");
            e.style.width = "100%",
                e.style.height = "100%",
                e.style.backgroundColor = "none",
                e.id = "slideBg",
                e.style.display = "none",
                e.style.position = "fixed",
                // e.style.zIndex = "100001",
                document.body.appendChild(e);
            var t = document.createElement("img");
            t.src = "res/arrow.png";
            t.style.position = "absolute",
                // t.style.zIndex = "100002",
                t.id = "slide",
                t.style.left = "25%",
                e.appendChild(t);
        }
    };
    return Adapter;
}());
var myAdapter = new Adapter();

使用到的图片需要放到res目录下,资源如下:

Comments | NOTHING

暂无评论...