unity在发布Web端全屏时，在手机上浏览器上只能横屏或者竖屏能正常显示，后来发现是手机上浏览器要设置viewport就写了这个模板
这里是模板下载链接：/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的深入理解
<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.0;可视区域的缩放级别，
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放
<body onFocus="FitScreen();" onLoad="FitScreen();" onResize="FitScreen();" οnblur="mute();">
上面一行保证无论是加载界面还是对浏览器进行尺寸更改都调用FitScreen方法对游戏进行全屏显示或者等比例缩放游戏画面
关于手机浏览器警告
更改发布之后的文件中的部分代码，下面代码就是在unity中发布完成后自动更改包体中文件的方法：
public class PostBuildHandler{[PostProcessBuild]public static void OnPostProcessBuild(BuildTarget target, string targetPath){if (target != BuildTarget.WebGL)return;var path = bine(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、加载进度条底图、进度条、加载界面图标
