CocosCreator h5游戏移动端全屏显示

朱雀 2022-06-02 11:09 806阅读 0赞

文章里的方法主要是针对creator游戏引擎的构建后项目，但是也可以由此文章中的方法，再作针对其他h5游戏引擎的修改，由此借鉴出其他h5游戏引擎的全屏显示。

先来看构建后的文件结构：

![20180111145517497][]

其中，红色框里的文件是需要自定义的，css、dist和img文件夹是creator不会构建出来的，需要自己加上去。index.html是creator构建出来的，我们需要对它进行修改。

再看css、dist和img文件夹里的内容：

![20180111150615484][]

![20180111150742822][]

![20180111150943217][]

我们先修改index.html里的代码为：

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
    
      <title>test</title>
    
      
      <meta name="viewport"
            content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1"/>
    
      
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
      <meta name="format-detection" content="telephone=no">
    
      
      <meta name="renderer" content="webkit"/>
      <meta name="force-rendering" content="webkit"/>
      
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
      <meta name="msapplication-tap-highlight" content="no">
    
      
      <meta name="full-screen" content="yes"/>
      <meta name="x5-fullscreen" content="true"/>
      <meta name="360-fullscreen" content="true"/>
      
      
      <meta name="screen-orientation" content=""/>
      <meta name="x5-orientation" content="">
    
      
      
      <meta name="x5-page-mode" content="app">
      <link rel="stylesheet" type="text/css" href="style-mobile.css"/>
      
      
      <link href="css/style.css" rel="stylesheet" type="text/css"/>
      <script src="dist/orientationchangeend.js"></script>  
    </head>
    <body id="body-sec">
      <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
      <div id="splash">
        <div class="progress-bar stripes">
          <span style="width: 0%"></span>
        </div>
      </div>
    <div id="orientationswipe"></div>
    <script src="src/settings.js" charset="utf-8"></script>
    <script src="main.js" charset="utf-8"></script>
    <script type="text/javascript" src="dist/index.js"></script>
    
    </body>
    </html>

style.css：

/*.content-holder,.flag-holder,.logo-holder,.form-holder {
    	border:1px green solid;
    }*/
    html, body, form {
      	height:101%;
      	width:100%;	
      	margin:0;
      	padding:0;
        overflow: hidden;
    }
    
    #orientationswipe {
        margin: 0 auto;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../img/swipe2.gif);
        background-repeat: no-repeat;
        background-position: center;
        background-color: #000;
        z-index: 999;
        display : none;
        opacity: .4;
    }

index.js：

//desktop
    var isMobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) !=null;
    
    var isiPad = navigator.userAgent.match(/iPad/i) != null; 
    
    var isiPhone = navigator.userAgent.match(/iPhone|iPod/i) != null;  
    
    //baidu
    var isBaidu = navigator.userAgent.match('baidu') != null;
    
    //QQ browser
    var isQQ = navigator.userAgent.match('MQQBrowser') != null;
    
    //Saferi Browser
    var isFirefox = navigator.userAgent.match('FxiOS') != null;
    
    // UC Browser
    var  isUC = navigator.userAgent.indexOf("UCBrowser") != -1;
    
    // Chrome 1+
    var isChrome = navigator.userAgent.match('CriOS') != null;
    
    //xiaomi
    var isXiaomi = navigator.userAgent.match('XiaoMi') != null;
    
    // Safari 3.0+ "[object HTMLElementConstructor]"
    var isSafari = navigator.userAgent.match('Safari') && !isBaidu && !isFirefox && !isQQ && !isChrome && !isUC && !isXiaomi;
    
    var isAndroid = /android/i.test(navigator.userAgent || navigator.vendor || window.opera);
    
    var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
    
    
    
    var OCE = gajus.orientationchangeend({
      debug: false
    });
    
    var maxPorHet = 0;
    var maxLanHet = 0;
    
    function preventDefault(e) {
      e = e || window.event;
      if (e.preventDefault)
          e.preventDefault();
      e.returnValue = false;  
    }
    
    function nopreventDefault(e) {
      e = e || window.event;
      if (e.preventDefault)
          e.preventDefault();
      e.returnValue = true;
    }
    
    var bodyTag = document.getElementsByTagName('body')[0]; 
    function displaySwipe() {
        document.getElementById("orientationswipe").style.display = "block";
        var isFullScreen =  window.navigator.standalone | false;
        if(!isFullScreen){
            bodyTag.style.height = '150%';
        }
    }
    
    function setOrientationSize(maxHet) {
        if(window.innerHeight >= maxHet){
            document.getElementById("orientationswipe").style.display = "none";        
            if(window.innerHeight > maxHet*1.01) {
                maxHet = window.innerHeight;
            }
            if(isSafari) {
                setTimeout(function(){window.scrollTo(0,0);},200); 
            } else {
                bodyTag.style.height = '100%';
            }
            // cmkj.EventCtrl.sendDataEvent("test", window.innerHeight + " v2 " + maxHet + " " + maxPorHet + " " + maxLanHet);
            
        }else {
            displaySwipe();
        }
    
        return maxHet;
    }
    
    
    function setOnOriention() {
        setTimeout(function(){
            window.scrollTo(0,0);
        },100); 
        if(window.orientation == 0 || window.orientation == 180){
            maxPorHet = setOrientationSize(maxPorHet);
        }
        if(window.orientation == 90 || window.orientation == -90){
            maxLanHet = setOrientationSize(maxLanHet);
        }
    }
    
    //safari第一次会自动滑动一下。
    var isFirstScroll = true;
    function setOnScroll() {
        if(isFirstScroll) {
            isFirstScroll = null;
            return;
        }
        if(window.orientation == 0 || window.orientation == 180){
            maxPorHet = setOrientationSize(maxPorHet);
        }
        if(window.orientation == 90 || window.orientation == -90){
            maxLanHet = setOrientationSize(maxLanHet);
        }
    }
    
    window.addEventListener('load', function() {
        if(!iOS) {
            return ;
        }
        if(window.orientation == 0 || window.orientation == 180){
            displaySwipe();
            maxPorHet = window.innerHeight;
        }
        if(window.orientation == 90 || window.orientation == -90){
            displaySwipe();
            maxLanHet = window.innerHeight;
        }
    
        OCE.on('orientationchangeend', function () {
            setOnOriention();
        });
    
        if(window.addEventListener){
            window.addEventListener('scroll', setOnScroll, false);
        } else {
            window.attachEvent('onscroll', setOnScroll);
        }
    }, false);

orientationchangeend.js：

/**
     * @version 1.1.2
     * @link https://github.com/gajus/orientationchangeend for the canonical source repository
     * @license https://github.com/gajus/orientationchangeend/blob/master/LICENSE BSD 3-Clause
     */
    (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
    (function (global){
    /**
    * @link https://github.com/gajus/sister for the canonical source repository
    * @license https://github.com/gajus/sister/blob/master/LICENSE BSD 3-Clause
    */
    function Sister () {
        var sister = {},
            events = {};
    
        /**
         * @name handler
         * @function
         * @param {Object} data Event data.
         */
    
        /**
         * @param {String} name Event name.
         * @param {handler} handler
         * @return {listener}
         */
        sister.on = function (name, handler) {
            var listener = {name: name, handler: handler};
            events[name] = events[name] || [];
            events[name].unshift(listener);
            return listener;
        };
    
        /**
         * @param {listener}
         */
        sister.off = function (listener) {
            var index = events[listener.name].indexOf(listener);
    
            if (index != -1) {
                events[listener.name].splice(index, 1);
            }
        };
    
        /**
         * @param {String} name Event name.
         * @param {Object} data Event data.
         */
        sister.trigger = function (name, data) {
            var listeners = events[name],
                i;
    
            if (listeners) {
                i = listeners.length;
                while (i--) {
                    listeners[i].handler(data);
                }
            }
        };
    
        return sister;
    }
    
    global.gajus = global.gajus || {};
    global.gajus.Sister = Sister;
    
    module.exports = Sister;
    }).call(this,typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
    },{}],2:[function(require,module,exports){
    (function (global){
    var Event,
        Sister = require('sister');
    
    Event = function Event (config) {
        var event,
            lastEnd,
            eventEmitter;
    
        if (!(this instanceof Event)) {
            return new Event(config);
        }
    
        eventEmitter = Sister();
    
        event = this;
        event.on = eventEmitter.on;
    
        config = config || {};
    
        /**
         * @var {Number} Number of iterations the subject of interval inspection must not mutate to fire "orientationchangeend".
         */
        config.noChangeCountToEnd = config.noChangeCountToEnd || 100;
        /**
         * @var {Number} Number of milliseconds after which fire the "orientationchangeend" if interval inspection did not do it before.
         */
        config.noEndTimeout = 1000 || config.noEndTimeout;
        /**
         * @var {Boolean} Enables logging of the events.
         */
        config.debug = config.debug || false;
    
        global.addEventListener('orientationchange', function () {
                var interval,
                    timeout,
                    end,
                    lastInnerWidth,
                    lastInnerHeight,
                    noChangeCount;
    
                end = function (dispatchEvent) {
                    clearInterval(interval);
                    clearTimeout(timeout);
    
                    interval = null;
                    timeout = null;
    
                    if (dispatchEvent) {
                        eventEmitter.trigger('orientationchangeend');
                    }
                };
    
                // If there is a series of orientationchange events fired one after another,
                // where n event orientationchangeend event has not been fired before the n+2 orientationchange,
                // then orientationchangeend will fire only for the last orientationchange event in the series.
                if (lastEnd) {
                    lastEnd(false);
                }
    
                lastEnd = end;
    
                interval = setInterval(function () {
                    if (global.innerWidth === lastInnerWidth && global.innerHeight === lastInnerHeight) {
                        noChangeCount++;
    
                        if (noChangeCount === config.noChangeCountToEnd) {
                            if (config.debug) {
                                console.debug('setInterval');
                            }
    
                            end(true);
                        }
                    } else {
                        lastInnerWidth = global.innerWidth;
                        lastInnerHeight = global.innerHeight;
                        noChangeCount = 0;
                    }
                });
                timeout = setTimeout(function () {
                    if (config.debug) {
                        console.debug('setTimeout');
                    }
    
                    end(true);
                }, config.noEndTimeout);
            });
    }
    
    global.gajus = global.gajus || {};
    global.gajus.orientationchangeend = Event;
    
    module.exports = Event;
    }).call(this,typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
    },{"sister":1}]},{},[2])

最后，有一个动态图，引导用户滑动全屏，swipe2.gif：

![20180111151440376][]

2019.5.24更新：

有些手机不能用滑动进入全屏，这样的话，我们可以判断页面是不是可以直接点击进入全屏，再调用滑动进入的功能代码。

下面是判断点击进入全屏和滑动进入全屏功能的项目代码链接：

[https://pan.baidu.com/s/1lqjaX2nBf4TieddnFuaIRA][https_pan.baidu.com_s_1lqjaX2nBf4TieddnFuaIRA]

提取码：2ash

[20180111145517497]: /images/20220602/3722aaf4b6df4f64b0222ad0c037660a.png
[20180111150615484]: /images/20220602/15c0b9f8f00f4794ab63f2117927e4cb.png
[20180111150742822]: /images/20220602/946323a26858447dbfaf6410180b25be.png
[20180111150943217]: /images/20220602/74528cc3bf0e45f893aa5c7ba30a7588.png
[20180111151440376]: /images/20220602/c1cbfa2f45644922a4d2fa259f7a7b15.png
[https_pan.baidu.com_s_1lqjaX2nBf4TieddnFuaIRA]: https://pan.baidu.com/s/1lqjaX2nBf4TieddnFuaIRA