CocosCreator h5游戏移动端全屏显示

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

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

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

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

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

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>test</title><!--http://www.html5rocks.com/en/mobile/mobifying/--><meta name="viewport"content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1"/><!--https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html--><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"><!-- force webkit on 360 --><meta name="renderer" content="webkit"/><meta name="force-rendering" content="webkit"/><!-- force edge on IE --><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="msapplication-tap-highlight" content="no"><!-- force full screen on some browser --><meta name="full-screen" content="yes"/><meta name="x5-fullscreen" content="true"/><meta name="360-fullscreen" content="true"/><!-- force screen orientation on some browser --><meta name="screen-orientation" content=""/><meta name="x5-orientation" content=""><!--fix fireball/issues/3568 --><!--<meta name="browsermode" content="application">--><meta name="x5-page-mode" content="app"><link rel="stylesheet" type="text/css" href="style-mobile.css"/><!--<link rel="apple-touch-icon" href=".png" />--><!--<link rel="apple-touch-icon-precomposed" href=".png" />--><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：

2019.5.24更新：

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

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

https://pan.baidu.com/s/1lqjaX2nBf4TieddnFuaIRA

提取码：2ash

CocosCreator h5游戏移动端全屏显示相关推荐

计算机玩游戏不能全屏,如果电脑游戏无法全屏显示怎么办？电脑游戏解决方案不能全屏显示...
指南: 互联网已逐渐成为我们日常生活中不可或缺的一部分. 它不仅为我们带来了很多便利,还为我们的娱乐生活增添了很多乐趣. 许通过计算机玩一些游戏,并且在使用计算机玩网络游戏的过程中,我们都希望游戏可以 ...
h5页面实现浏览器全屏显示
目录开启全屏显示退出全屏显示获取当前是否全屏状态开启全屏显示 let el = document.documentElement; // 不同浏览器兼容方法调用 if(el.requestFu ...
h5 video 手机上无法显示_手机镜象投屏到电视上全屏显示
手机镜象投屏到电视上全屏显示随着手机投屏被越来越多的人知道,手机镜像投屏到大屏幕不是全屏的问题成为许多人心中的痛.AWIND奇机在2019年就做出了竖屏投屏器可以轻松让手机镜像投屏到大屏幕上为全屏显 ...
随笔：说说第一次在android中嵌入非全屏显示的unity游戏时的坑之——界面切换时出现延迟/卡顿/花屏等现象解决方法
One 最近对接了个unity3D做的小游戏到android项目中:游戏嵌入项目的界面且非全屏显示,项目几经波折,到我手上的时候,已经采用了在同一个activity中用两个View来分别显示andro ...
windows7 系统游戏全屏显示
有很多朋友在玩游戏的时候,在w7系统下都会出现不是全屏的显示,就算打开全屏显示也是,那就可以时一下下面的方法: 1,windows+r 输入regedit 打开注册表,找到以下参数 HKEY_L ...
【Unity游戏开发基础】如何通过游戏菜单控制游戏全屏显示
[脚本] public void SetFullscreen (bool isFullscreen) {Screen.fullScreen = isFullscreen; } 其中Screen是游戏本 ...
jquery video全屏_用videojs让HTML5视频在移动端全屏的方法
用videojs让HTML5视频在移动端全屏的方法文章标签: 视频 : 04-10 19:23 : 1859次 : 0条 1赞点赞简介在使用videojs插件时,如何让HTML5的视频在移动端里 ...
body 没有被撑开_body没有高度设置背景色为什么可以全屏显示？
原标题:body没有高度设置背景色为什么可以全屏显示? --- 关于html和body的那些事还记得我们开发全屏页面或者是移动端页面时经常会设置一句话 html, body { height: 10 ...
Galaxy S8及S+全屏显示适配
Galaxy S8及S8+分别搭载"5.8"与"6.2"大屏,高达84%的屏幕占比为Galaxy S8及S8+在游戏娱乐.观看视频时带来深度沉浸式视觉体验.但是 ...

CocosCreator h5游戏移动端全屏显示

CocosCreator h5游戏移动端全屏显示相关推荐

最新文章

热门文章