优化html
This commit is contained in:
parent
c116840922
commit
6b8a4f07d4
|
@ -1,5 +1,6 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en-us">
|
<html lang="en-us">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
@ -8,12 +9,14 @@
|
||||||
<link rel="stylesheet" href="TemplateData/style.css">
|
<link rel="stylesheet" href="TemplateData/style.css">
|
||||||
</head>
|
</head>
|
||||||
<style>
|
<style>
|
||||||
body,html{
|
body,
|
||||||
|
html {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="unity-container" style="height: 100%;" class="unity-desktop">
|
<div id="unity-container" style="height: 100%;" class="unity-desktop">
|
||||||
<canvas id="unity-canvas" width=1600 height=900></canvas>
|
<canvas id="unity-canvas" width=1600 height=900></canvas>
|
||||||
|
@ -49,8 +52,11 @@
|
||||||
// user.
|
// user.
|
||||||
function unityShowBanner(msg, type) {
|
function unityShowBanner(msg, type) {
|
||||||
function updateBannerVisibility() {
|
function updateBannerVisibility() {
|
||||||
|
if (warningBanner) {
|
||||||
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
|
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
if (warningBanner) {
|
||||||
var div = document.createElement('div');
|
var div = document.createElement('div');
|
||||||
div.innerHTML = msg;
|
div.innerHTML = msg;
|
||||||
warningBanner.appendChild(div);
|
warningBanner.appendChild(div);
|
||||||
|
@ -62,6 +68,7 @@
|
||||||
updateBannerVisibility();
|
updateBannerVisibility();
|
||||||
}, 5000);
|
}, 5000);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
updateBannerVisibility();
|
updateBannerVisibility();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -92,14 +99,18 @@
|
||||||
meta.name = 'viewport';
|
meta.name = 'viewport';
|
||||||
meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
|
meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
|
||||||
document.getElementsByTagName('head')[0].appendChild(meta);
|
document.getElementsByTagName('head')[0].appendChild(meta);
|
||||||
|
if (container) {
|
||||||
container.className = "unity-mobile";
|
container.className = "unity-mobile";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// To lower canvas resolution on mobile devices to gain some
|
// To lower canvas resolution on mobile devices to gain some
|
||||||
// performance, uncomment the following line:
|
// performance, uncomment the following line:
|
||||||
// config.devicePixelRatio = 1;
|
// config.devicePixelRatio = 1;
|
||||||
|
if (canvas) {
|
||||||
canvas.style.width = window.innerWidth + 'px';
|
canvas.style.width = window.innerWidth + 'px';
|
||||||
canvas.style.height = window.innerHeight + 'px';
|
canvas.style.height = window.innerHeight + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
unityShowBanner('WebGL builds are not supported on mobile devices.');
|
unityShowBanner('WebGL builds are not supported on mobile devices.');
|
||||||
} else {
|
} else {
|
||||||
|
@ -110,33 +121,43 @@
|
||||||
// canvas.style.width = window.innerWidth + 'px';
|
// canvas.style.width = window.innerWidth + 'px';
|
||||||
// canvas.style.height = window.innerHeight + 'px';
|
// canvas.style.height = window.innerHeight + 'px';
|
||||||
}
|
}
|
||||||
|
if (loadingBar) {
|
||||||
loadingBar.style.display = "block";
|
loadingBar.style.display = "block";
|
||||||
|
}
|
||||||
|
|
||||||
var unity;
|
var unity;
|
||||||
var script = document.createElement("script");
|
var script = document.createElement("script");
|
||||||
script.src = loaderUrl;
|
script.src = loaderUrl;
|
||||||
script.onload = () => {
|
script.onload = () => {
|
||||||
|
if (canvas) {
|
||||||
createUnityInstance(canvas, config, (progress) => {
|
createUnityInstance(canvas, config, (progress) => {
|
||||||
|
if (progressBarFull) {
|
||||||
progressBarFull.style.width = 100 * progress + "%";
|
progressBarFull.style.width = 100 * progress + "%";
|
||||||
if (progressBarFull.style.width == 90 + "%") {
|
if (progressBarFull.style.width == 90 + "%") {
|
||||||
|
if (black) {
|
||||||
black.style.display = "block";
|
black.style.display = "block";
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}).then((unityInstance) => {
|
}).then((unityInstance) => {
|
||||||
unity = unityInstance
|
unity = unityInstance
|
||||||
|
if (loadingBar) {
|
||||||
loadingBar.style.display = "none";
|
loadingBar.style.display = "none";
|
||||||
|
}
|
||||||
// fullscreenButton.onclick = () => {
|
// fullscreenButton.onclick = () => {
|
||||||
// unityInstance.SetFullscreen(1);
|
// unityInstance.SetFullscreen(1);
|
||||||
// };
|
// };
|
||||||
}).catch((message) => {
|
}).catch((message) => {
|
||||||
alert(message);
|
alert('createUnityInstance' + message);
|
||||||
});
|
});
|
||||||
|
}
|
||||||
};
|
};
|
||||||
//unity初始化
|
//unity初始化
|
||||||
function OnSceneLoaded() {
|
function OnSceneLoaded() {
|
||||||
|
if (black) {
|
||||||
black.style.display = "none";
|
black.style.display = "none";
|
||||||
|
}
|
||||||
window.parent.OnScene();
|
window.parent.OnScene();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -310,18 +331,19 @@
|
||||||
// window.parent.getZhuanFaMQTT(data,data2,data3);
|
// window.parent.getZhuanFaMQTT(data,data2,data3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function AddMonqjktx_Error(data) {
|
function AddMonqjktx_Error(data) {
|
||||||
console.log("AddMonqjktx_Error", data)
|
console.log("AddMonqjktx_Error", data)
|
||||||
window.parent.AddMonqjktx_Error(data);
|
window.parent.AddMonqjktx_Error(data);
|
||||||
}
|
}
|
||||||
document.body.appendChild(script);
|
document.body.appendChild(script);
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
#unity-container.unity-desktop::-webkit-scrollbar {
|
#unity-container.unity-desktop::-webkit-scrollbar {
|
||||||
display: none; /* Chrome Safari */
|
display: none;
|
||||||
|
/* Chrome Safari */
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
|
@ -49,11 +49,15 @@
|
||||||
// user.
|
// user.
|
||||||
function unityShowBanner(msg, type) {
|
function unityShowBanner(msg, type) {
|
||||||
function updateBannerVisibility() {
|
function updateBannerVisibility() {
|
||||||
|
if (warningBanner) {
|
||||||
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
|
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
if (warningBanner) {
|
||||||
var div = document.createElement('div');
|
var div = document.createElement('div');
|
||||||
div.innerHTML = msg;
|
div.innerHTML = msg;
|
||||||
warningBanner.appendChild(div);
|
warningBanner.appendChild(div);
|
||||||
|
|
||||||
if (type == 'error') div.style = 'background: red; padding: 10px;';
|
if (type == 'error') div.style = 'background: red; padding: 10px;';
|
||||||
else {
|
else {
|
||||||
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
|
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
|
||||||
|
@ -62,6 +66,7 @@
|
||||||
updateBannerVisibility();
|
updateBannerVisibility();
|
||||||
}, 5000);
|
}, 5000);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
updateBannerVisibility();
|
updateBannerVisibility();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -98,35 +103,42 @@
|
||||||
// To lower canvas resolution on mobile devices to gain some
|
// To lower canvas resolution on mobile devices to gain some
|
||||||
// performance, uncomment the following line:
|
// performance, uncomment the following line:
|
||||||
// config.devicePixelRatio = 1;
|
// config.devicePixelRatio = 1;
|
||||||
|
if (canvas) {
|
||||||
canvas.style.width = window.innerWidth + 'px';
|
canvas.style.width = window.innerWidth + 'px';
|
||||||
canvas.style.height = window.innerHeight + 'px';
|
canvas.style.height = window.innerHeight + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
unityShowBanner('WebGL builds are not supported on mobile devices.');
|
unityShowBanner('WebGL builds are not supported on mobile devices.');
|
||||||
} else {
|
} else {
|
||||||
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
|
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
|
||||||
|
if (canvas) {
|
||||||
canvas.style.width = "100%";
|
canvas.style.width = "100%";
|
||||||
canvas.style.height = "100%";
|
canvas.style.height = "100%";
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
if (loadingBar) {
|
||||||
loadingBar.style.display = "block";
|
loadingBar.style.display = "block";
|
||||||
|
}
|
||||||
|
|
||||||
var script = document.createElement("script");
|
var script = document.createElement("script");
|
||||||
var unityInstanceA
|
var unityInstanceA
|
||||||
script.src = loaderUrl;
|
script.src = loaderUrl;
|
||||||
script.onload = () => {
|
script.onload = () => {
|
||||||
|
if (canvas) {
|
||||||
createUnityInstance(canvas, config, (progress) => {
|
createUnityInstance(canvas, config, (progress) => {
|
||||||
progressBarFull.style.width = 100 * progress + "%";
|
progressBarFull.style.width = 100 * progress + "%";
|
||||||
}).then((unityInstance) => {
|
}).then((unityInstance) => {
|
||||||
unityInstanceA = unityInstance
|
unityInstanceA = unityInstance
|
||||||
|
if (loadingBar) {
|
||||||
loadingBar.style.display = "none";
|
loadingBar.style.display = "none";
|
||||||
|
}
|
||||||
fullscreenButton.onclick = () => {
|
fullscreenButton.onclick = () => {
|
||||||
unityInstance.SetFullscreen(1);
|
unityInstance.SetFullscreen(1);
|
||||||
};
|
};
|
||||||
}).catch((message) => {
|
}).catch((message) => {
|
||||||
alert(message);
|
alert('createUnityInstance' + message);
|
||||||
});
|
});
|
||||||
|
}
|
||||||
};
|
};
|
||||||
//unity初始化
|
//unity初始化
|
||||||
function OnSceneLoaded() {
|
function OnSceneLoaded() {
|
||||||
|
@ -136,6 +148,7 @@
|
||||||
function Started() {
|
function Started() {
|
||||||
window.parent.started();
|
window.parent.started();
|
||||||
}
|
}
|
||||||
|
|
||||||
function getDianwei(string) {
|
function getDianwei(string) {
|
||||||
unityInstanceA.SendMessage('GameManager', 'ReceptionVideoIdSececeTwo', JSON.stringify(string));
|
unityInstanceA.SendMessage('GameManager', 'ReceptionVideoIdSececeTwo', JSON.stringify(string));
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue