【unity发布webgl】遇到的问题和解决办法

Jessica巨人

已于 2022-04-02 09:33:28 修改

阅读量1w

点赞数 2

分类专栏： unity引擎文章标签： unity 游戏引擎

于 2022-03-16 14:10:13 首次发布

本文链接：https://blog.youkuaiyun.com/qq_34113388/article/details/123525076

版权

本文讲述了在iOS、Vivo和小米设备上部署Unity WebGL应用时遇到的130kb图片加载问题，解决移动端弹出提示并强制横屏显示。重点介绍了修改UnityLoader.js和index.html以适应不同分辨率和浏览器兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.发布部署出来的链接放到手机上测试。
ios：20秒读条然后闪退；vivo:9秒读条闪退；小米：15秒进入
然鹅，资料只有130kb的图片。

2.报这个警告，修改Build文件夹里的UnityLoader.js取消
移动端展示弹出提示框，点击OK后继续打开webgl
please note the unity webgl is not currently supported on mobiles.press ok if you wish to continue anyway.
请注意，手机目前不支持unity webgl。如果仍要继续，请按ok。
修改UnityLoader.js：

compatibilityCheck:function(e,t,r){
   
    UnityLoader.SystemInfo.hasWebGL?
        UnityLoader.SystemInfo.mobile?
            t()
            :["Firefox","Chrome","Safari"].indexOf(UnityLoader.SystemInfo.browser)==-1?
                t()
                :t()
        :e.popup("Your browser does not support WebGL",[{
   text:"OK",callback:r}])
    },
    Blobs:{
   },loa...(省略)

请添加图片描述
3.自适应屏幕修改和手机端强制横屏index.html
因为浏览器的分辨率不一样，所以我上面的button都不在原位置，而且分辨率小的浏览器显示的画布都不全，就得做自适应。
还有PC端是横版的，要是手机端是竖版的就得做两套UI，判断webgl是运行在PC端还是手机端，然后jslib本地插件从浏览器获取屏幕分辨率数据再把数据传回unity再通过screen.Resolution()函数设置画布的大小有点麻烦，我们直接就手机端强制横屏了。（测试最新判断unitywebgl运行在PC还是手机端的方法报了五个错打出来的空包，老办法PC是cube 手机端是sphere还是可以的）

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | TestConnection</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>
    <script>
      var gameInstance = UnityLoader.instantiate("gameContainer", "Build/num3.json", {
     <

最低0.47元/天解锁文章