Unity打包Webgl 网页全屏

木土木昜

已于 2024-06-25 13:53:32 修改

阅读量2.4k

点赞数

文章标签： unity html5

于 2022-09-29 15:57:47 首次发布

本文链接：https://blog.csdn.net/weixin_43385377/article/details/127108424

版权

修改unity打包后的Webgl的H5代码
将

unity 2019

<body>
    <div class="webgl-content">
      <div id="unityContainer" style="width: 1900px; height: 960px"></div>`

修改为

<body scroll="no" style="overflow-y:hidden">
    <div class="webgl-content" style="width: 100%; height: 100%">
        <div id="unityContainer" style="width: 100%; height: 100%;

unity 2021

1修改下面部分

在里面修改css样式

	<style>
	  /* 防止出现滚动条的CSS样式 */
	  html, body {
	    overflow: hidden;
	    height: 100%;
	    margin: 0;
	  }
	  #unity-container {
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
	  }
	  #unity-canvas {
	    width: 100%;
	    height: 100%;
	  }
	</style>
  </head>

<div id="unity-container" style="width: 100%;height:100%">
      <canvas id="unity-canvas" width=auto height=auto></canvas>

2、修改
canvas.style.width = “1900px”;
canvas.style.height = “900px”;
为
canvas.style.width = “100%”;
canvas.style.height = “100%”;

 if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
        // Mobile device style: fill the whole browser client area with the game canvas:

        var meta = document.createElement('meta');
        meta.name = 'viewport';
        meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
        document.getElementsByTagName('head')[0].appendChild(meta);
        container.className = "unity-mobile";
        canvas.className = "unity-mobile";

        // To lower canvas resolution on mobile devices to gain some
        // performance, uncomment the following line:
        // config.devicePixelRatio = 1;

        unityShowBanner('WebGL builds are not supported on mobile devices.');
      } else {
        // Desktop style: Render the game canvas in a window that can be maximized to fullscreen:

        canvas.style.width = "100%";
        canvas.style.height = "100%";
      }