简单适配 pc 端

index.html

@@ -16,6 +16,8 @@
     body {
       width: 100vw;
       height: 100vh;
+      max-width: 500px;
+      margin: 0 auto;
       overflow: hidden;
     }
 

model.html

@@ -37,6 +37,11 @@
   </div>
 
   <script>
+
+    if(window.innerWidth>=500){
+      document.querySelector('.shareTit').innerHTML='点击鼠标右键保存'
+    }
+
     let unityExamples = null
 
     window.addEventListener("load", function () {
@@ -47,6 +52,11 @@
 
     var container = document.querySelector("#unity-container");
     var canvas = document.querySelector("#unity-canvas");
+
+    // 动态设置 canvas的 宽高
+    canvas.width=window.innerWidth>=500?500:window.innerWidth
+    canvas.height =window.innerHeight
+
     var loadingBar = document.querySelector("#unity-loading-bar");
     var progressBarFull = document.querySelector("#unity-progress-bar-full");
     var warningBanner = document.querySelector("#unity-warning");

myCode/style.css

@@ -4,10 +4,19 @@
   box-sizing: border-box;
 }
 body {
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
+  max-width: 500px;
+  margin: 0 auto;
+  overflow: hidden;
 }
 body #unity-container {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  max-width: 500px;
   width: 100%;
   height: 100%;
 }

myCode/style.less

@@ -5,10 +5,19 @@
 }
 
 body {
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
+  max-width: 500px;
+  margin: 0 auto;
+  overflow: hidden;
 
   #unity-container {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 10;
+    max-width: 500px;
     width: 100%;
     height: 100%;