优化html

This commit is contained in:
qiudan 2023-12-08 15:27:41 +08:00
parent c116840922
commit 6b8a4f07d4
2 changed files with 323 additions and 288 deletions

View File

@ -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>

View File

@ -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));
} }