這個問題困擾我好久了,在論壇裏找了好久也沒有找到比較好的解決方案,或者有解決方案,但是不夠清楚,今天終於找到了一個比較好的解決方案,供大家參考
一、將項目打包,找到打包出的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)