这个问题困扰我好久了,在论坛里找了好久也没有找到比较好的解决方案,或者有解决方案,但是不够清楚,今天终于找到了一个比较好的解决方案,供大家参考
一、将项目打包,找到打包出的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)