unity WebGL 在移动端浏览器全屏自适应Build模板

最新推荐文章于 2024-06-05 15:11:19 发布

置顶时无言

最新推荐文章于 2024-06-05 15:11:19 发布

阅读量3.5k

点赞数 1

分类专栏： Unity 浏览器文章标签： unity3d web android html javascript

本文链接：https://blog.csdn.net/weixin_44250118/article/details/117321970

版权

Unity 同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

浏览器

3 篇文章 0 订阅

订阅专栏

unity在发布Web端全屏时，在手机上浏览器上只能横屏或者竖屏能正常显示，后来发现是手机上浏览器要设置viewport就写了这个模板

这里是模板下载链接：https://download.csdn.net/download/weixin_44250118/19119916

index.html

<!DOCTYPE html>
<meta name="viewport"
	content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>%UNITY_WEB_NAME%</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <script src="TemplateData/UnityProgress.js"></script>
	<script type="text/javascript">
	function FitScreen() {
			console.log = console.info = console.warn = function() {};
			var w = %UNITY_WIDTH%;
			var h = %UNITY_HEIGHT%;
			var availWidth = window.innerWidth;
			var availHeight = window.innerHeight;

			var canvas = document.getElementById("#canvas");
			/**
			//按比例调节 按照unity中设置分辨率等比例缩放
			if (availWidth / availHeight > w / h) {
				height = availHeight;
				width = (height * w / h);
			 } else {
				width = availWidth;
				height = width * h / w;
			}
			*/
			height = availHeight;
			width = availWidth;
			document.getElementById("unityContainer").style.width = width + "px";
			document.getElementById("unityContainer").style.height = height + "px";

			canvas.style.width = "100%";
			canvas.style.height = "100%";
			if (window.WEBAudioMute) {
				window.WEBAudioMute(false);
			}
		}
		function mute() {
			if (window.WEBAudioMute) {
				window.WEBAudioMute(true);
			}
		}
	</script>
    <script src="%UNITY_WEBGL_LOADER_URL%"></script>
    <script>
      var unityInstance = UnityLoader.instantiate("unityContainer", "%UNITY_WEBGL_BUILD_URL%", {onProgress: UnityProgress});
    </script>
  </head>
  <body onFocus="FitScreen();" onLoad="FitScreen();" onResize="FitScreen();" onblur="mute();">
    <div class="webgl-content" id="unityContainer" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px" ></div>
  </body>
</html>

关于viewport的设置

移动前端开发之viewport的深入理解

content属性值 :

width:可视区域的宽度，值可为数字或关键词device-width

height:同width

intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放

maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，

maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。

user-scalable:是否可对页面进行缩放，no 禁止缩放

上面一行保证无论是加载界面还是对浏览器进行尺寸更改都调用FitScreen方法对游戏进行全屏显示或者等比例缩放游戏画面

关于手机浏览器警告

更改发布之后的文件中的部分代码，下面代码就是在unity中发布完成后自动更改包体中文件的方法：

public class PostBuildHandler
{
    [PostProcessBuild]
    public static void OnPostProcessBuild(BuildTarget target, string targetPath)
    {
        if (target != BuildTarget.WebGL)
            return;
        var path = Path.Combine(targetPath, "Build/UnityLoader.js");
        var text = File.ReadAllText(path);
        text = text.Replace("UnityLoader.SystemInfo.mobile", "false");
        text = text.Replace("[\"Edge\", \"Firefox\", \"Chrome\", \"Safari\"].indexOf(UnityLoader.SystemInfo.browser) == -1", "false");
        File.WriteAllText(path, text);
    }

}

更改加载界面和标题栏的ico

如上图所示替换里面的图片依次是改变：标题栏icon、加载进度条底图、进度条、加载界面图标

时无言

关注

1
点赞
踩
20

收藏

觉得还不错? 一键收藏
14
评论
unity WebGL 在移动端浏览器全屏自适应Build模板

<meta name="viewport" content="width=device-width,initial-scale=1.0">content属性值 : width:可视区域的宽度，值可为数字或关键词device-width height:同width intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 maximum-scale=1.0, minimum-scale=1....
复制链接

扫一扫

专栏目录