# 关于UnityWebGl导出后移动端和pc端的全屏和全屏/非全屏的切换

@ 关于UnityWebGl导出后移动端和pc端的全屏和全屏/非全屏的切换

关于UnityWebGl导出后移动端和pc端的全屏和全屏/非全屏的切换

对于unitywebgl 的全屏我在网上找了很多的方法,最后选择了比较合适的方法,下面分享给大家

改变导出文件的Html文件

导出之后,我们在导出的文件夹中会看到三个文件
在这里插入图片描述
我们要操作的是Index.html这个文件
用编辑器打开,我这里用到的是Hbuilder在这里插入图片描述
打开之后修改其代码,代码如下


<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | p1title>
    <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/UnityWebgl.json", {onProgress: UnityProgress});
    script>
    <script type="text/javascript">  
     function Reset(){
      var canvas=document.getElementById("#canvas");
      canvas.height=document.documentElement.clientHeight;
      canvas.width=document.documentElement.clientWidth;
      console.log(canvas.width);
     }    
    script>
  head>
  <body onload="Reset()" onresize="Reset()" >
    <div class="webgl-content" style="width: 100%; height: 100%">
      <div id="gameContainer" style="width: 100%; height: 100%">div>
     
    div>
  body>
html>

即可实现移动端和pc端的全屏

实现全屏/非全屏的切换

很简单
只需代码
Screen.fullScreen = !Screen.fullScreen;
对要切换的UI设置 Event Trigger事件
# 关于UnityWebGl导出后移动端和pc端的全屏和全屏/非全屏的切换_第1张图片

让后将设置的方法放进去就可以了

你可能感兴趣的:(# 关于UnityWebGl导出后移动端和pc端的全屏和全屏/非全屏的切换)