safar浏览器中只有一个Creator网页,横屏后会自动全屏, 但是如果有多个网页,Creator网页横屏后safar浏览器无法全屏.关于此问题,解决文案如下,供大家参考
一、将项目打包,找到打包出的index.html文件,在html文件里,添加一个div标签和一个文本提示,代码如下:
<body>
<canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
<div id="mask">
<h1 id="tip">请向上滑动全屏显示</h1>
</div>
<div id="splash">
<div class="progress-bar stripes">
<span style="width: 0%"></span>
</div>
</div>
<script src="src/settings.js" charset="utf-8"></script>
<script src="main.js" charset="utf-8"></script>
</body>
二、 在style-mobile.css中为这个div和字体添加css样式,这个根据个人喜好随意添加,代码如下:
#mask {
position:absolute;
z-index:9999;
background-color:#C0C0C0;
left: 0;
top: 0;
height:100%;
width:100%;
display :none;
opacity:0.5;
}
#tip{
color:red;
text-align:center;
float:center;
line-height:250px;
}
三、重点来了!在main.js管理显示这个div,有了这个div,safari浏览器就可以重新滑动了,代码如下:
const inBrowser = typeof window !== 'undefined';
const UA = inBrowser && window.navigator.userAgent.toLowerCase();
const isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA));//是否为iso环境
var loadOver=false;//是否加载完毕
function listenCallBack(){
if(isIOS)
{
var mask=document.getElementById('mask');
if(window.innerHeight == document.documentElement.clientHeight&&loadOver){ //全屏并且加载完毕,则不显示div,和加载的进度条
splash.style.display = 'none';
mask.style.display='none';
} else if(window.innerHeight == document.documentElement.clientHeight&&!loadOver)//全屏显示了,但并没有加载完毕则不显示div
{
mask.style.display='none';
}
else{ //未全屏显示则把div显示出来
mask.style.display='block';
}
}else{
if(loadOver){
splash.style.display = 'none';
}
}
}
四、找到main.js里的onStart()方法,设置改变显示区域大小的事件监听,然后找到setLoadingDisplay()方法,在进度条加载完成后,将loadOver设为true,代码如下:
var onStart = function () {
window.onresize = listenCallBack; //设置监听
listenCallBack();
cc.view.resizeWithBrowserSize(true);
//.......
}
function setLoadingDisplay () {
// ........
cc.director.once(cc.Director.EVENT_AFTER_SCENE_LAUNCH, function () {
loadOver=true;
listenCallBack();
});
}
这样就可以实现隐藏地址栏啦,当然你也可以不用阻止加载,因为那个div显示出来之后,就可以滑动页面啦.
可能因为网页的长度比较短,直接向上滑动有时候地址栏可能没有收回去
这样滑动更容易将地址栏隐藏(图片来自:https://blog.csdn.net/u013654125/article/details/79034208)
2019.8.29更新:此解决方案并不能判断游戏是在safari浏览器上打开的,如果使用了其他浏览器,比如谷歌(因为在ios上谷歌浏览器发现了问题。):也有可能弹出这个gif。而且有一个比较坑的问题是,Creator里的cc.sys.browserType会把所有ios上的浏览器当做safari浏览器,可能都是safari的内核,都是一套东西,只是外观不一样。就像360浏览器的内核是Chrome,所以360浏览器上cc.sys.browserType是Chrome。我们使用的是window.innerHeight和document.documentElement.clientHeight进行的比较,但是我在ios上使用谷歌浏览器,当我转动屏幕时(横竖屏切换)window.innerHeight的值会有问题,大概2.5秒window.innerHeight的值才正常。window.onresize只是监听显示区域大小的变化,不会监听window.innerHeight的值的变化,所以gif会弹出,但是值正常之后,并不会消失。有两种解决方案,一种是不再使用window.onresize,而是改为对window.innerHeight的监听,第二种是延迟2.5秒,再判断window.innerHeight是否相同。
2019.10.9更新:除了以上的解决方案外,还有一种解决方案是将网页上方的地址栏空出来,因为有些时候这样滑动全屏并不能很流畅的隐藏地址栏,造成不好的游戏体验。具体的代码如下:
....
if(cc.sys.isMobile&&cc.sys.browserType==cc.sys.BROWSET_TYPE_SAFARI&&window.innerHeight!=document.documentElement.clientHeight){//判断是否为手机端并且用的Safari浏览器并且实际高度和显示高度不一致
document.body.scrollTop=(document.documentElement.clientHeight-window.innerHeight)/2;//将网页滚动到高度差的一半。
}
....
此方法需要配合自己的屏幕适配代码使用,屏幕适配的代码每个游戏都不一样,这里只给大家一个思路。此方法只适用于ios13之前的版本。ios13之后的版本的safair浏览器用这个方法视图和按钮碰撞区域会错位,亲测。