unity导出的webgl工程，让其在pc端和移动端都全屏自适应

Spread123

于 2019-01-17 17:17:39 发布

阅读量4.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： unity webgl

本文链接：https://blog.youkuaiyun.com/Spread123/article/details/86528067

本文介绍了如何使Unity导出的WebGL应用在个人电脑和移动设备上都能实现全屏自适应，确保在不同平台上提供优秀的用户体验。通过调整配置和使用特定的适配代码，可以实现跨平台的完美适配。

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

<!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 | testweb</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/webgl.json", {onProgress: UnityProgress});
      --这里是修改的部分
	  function Reset()
    {
        var canvas = document.getElementById("#canvas");//获取#canvas
        canvas.height=  document.documentElement.clientHeight;//获取body可见区域高度
        canvas.width =  document.documentElement.clientWidth;//获取body可见区域高度
    } 
    </script>
  </head>
  --body部分的代码直接复制到index.html里
  <body onresize