// 添加在 index
.html 的 <script> 标签内
var unityIns = null; // 存储 Unity 实例
// 设备类型检测函数
function detectDeviceType() {
const ua = navigator
.userAgent;
if (/iPad/i
.test(ua)) {
return "iPad";
} else if (/iPhone/i
.test(ua)) {
return "iPhone";
} else if (/Android/i
.test(ua)) {
// 区分 Android 手机和平板：平板通常不含 "Mobile" 子串
return /Mobile/i
.test(ua) ? "Android Phone" : "Android Tablet";
} else {
return "Computer";
}
}
// Unity 初始化代码（参考引用[^3]）
createUnityInstance(canvas, config, (progress) => {
progressBarFull
.style
.width = 100 * progress + "%";
})
.then((unityInstance) => {
unityIns = unityInstance;
// 设备检测并发送消息给 Unity
const deviceType = detectDeviceType();
unityInstance
.SendMessage('DeviceManager', 'SetDeviceType', deviceType);
})
.catch((message) => {
alert(message);
});将代码添加到下面<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1
.0, maximum-scale=1
.0, user-scalable=no, orientation=landscape">
<title> Unity WebGL </title>
<link
rel="
shortcut icon"
href="TemplateData/
favicon.ico">
<link
rel="
stylesheet"
href="TemplateData/style
.css">
<script src="TemplateData/UnityProgress
.js"></script>
<script src="Build/UnityLoader
.js"></script>
<!-- 在这里加入CSS规则 -->
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%; /* 保证占满整个屏幕宽度 */
overflow: hidden; /* 防止出现滚动条 */
display: flex;
justify-content: center;
align-items: center;
}
#unityContainer {
width: 100% !important;
height: 100% !important;
background-color: black; /* 可选，设置背景颜色 */
}
canvas {
width: 100%;
height: 100%;
}
</style>
<script>
var unityInstance = UnityLoader
.instantiate("unityContainer", "Build/githubstone_new
.json", { onProgress: UnityProgress });
window
.addEventListener("resize", OnResize);
// 拆分参数处理逻辑为独立函数
function OnResize() {
unityInstance
.SendMessage("DebugText", "SetWidth", window
.innerWidth);
unityInstance
.SendMessage("DebugText", "SetHeight", window
.innerHeight);
unityInstance
.SendMessage("DebugText", "OnResize");
// 触发Unity中的分辨率更新
unityInstance
.SendMessage('DebugText', 'ForceRefresh');
}
// JavaScript: 获取URL参数并解析
function getQueryParam(param) {
const urlParams = new URLSearchParams(window
.location
.search);
return urlParams
.get(param);
}
// 参数映射标题
const titleMap = {
"TX": "天诩",
"SQSM": "石全石美",
"Test2": "天灵灵地灵灵",
"Test": "天地玄黄宇宙洪荒",
"UNITY": "Unity WebGL",
"
favicon": "天上老君急急如律令"
};
// 获取参数并设置标题
const qybs = getQueryParam("QYBS");
if (qybs && titleMap[qybs]) {
document
.title = titleMap[qybs];
}
// JavaScript: 动态设置网页图标
function setDynamic
Icon(
iconUrl) {
let link = document
.querySelector("link[
rel*='
icon']") || document
.createElement('link');
link
.type = 'image/x-
icon';
link
.rel = '
shortcut icon';
link
.href =
iconUrl;
document
.head
.appendChild(link);
}
// 替换
favicon
function set
Favicon(
iconName) {
const head = document
.getElementsByTagName('head')[0];
let link = document
.querySelector("link[
rel~='
icon']");
if (!link) {
link = document
.createElement('link');
link
.rel = '
icon';
head
.appendChild(link);
}
link
.href = `TemplateData/${
iconName}
.ico`;
}
// 根据参数
icon 设置
favicon
const
iconParam = getQueryParam("QYBS");
if (
iconParam) {
set
Favicon(
iconParam);
}
</script>
</head>
<body style="margin:0; overflow:hidden;">
<div id="unityContainer"></div>
</body>
</html>
本文探讨了HTML中使用<link>标签定义快捷方式图标的实践方法，并解析了favicon.ico文件的应用场景及其对网站标识的重要性。
扫一扫
3903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
