index.html 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <!DOCTYPE html>
  2. <html lang="en-us">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>Unity WebGL Player | unityearth</title>
  7. </head>
  8. <body style="text-align: center; padding: 0; border: 0; margin: 0;">
  9. <canvas id="unity-canvas" style=" position: absolute; width: 1920px; height: 1080px;"></canvas>
  10. <script src="Build/Game.loader.js"></script>
  11. <script>
  12. if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
  13. // Mobile device style: fill the whole browser client area with the game canvas:
  14. var meta = document.createElement('meta');
  15. meta.name = 'viewport';
  16. meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
  17. document.getElementsByTagName('head')[0].appendChild(meta);
  18. var canvas = document.querySelector("#unity-canvas");
  19. canvas.style.width = "100%";
  20. canvas.style.height = "100%";
  21. canvas.style.position = "fixed";
  22. document.body.style.textAlign = "left";
  23. }
  24. createUnityInstance(document.querySelector("#unity-canvas"), {
  25. dataUrl: "Build/Game.data",
  26. frameworkUrl: "Build/Game.framework.js",
  27. codeUrl: "Build/Game.wasm",
  28. streamingAssetsUrl: "StreamingAssets",
  29. companyName: "DefaultCompany",
  30. productName: "unityearth",
  31. productVersion: "1.0",
  32. // matchWebGLToCanvasSize: false, // Uncomment this to separately control WebGL canvas render size and DOM element size.
  33. // devicePixelRatio: 1, // Uncomment this to override low DPI rendering on high DPI displays.
  34. });
  35. </script>
  36. <script>
  37. // 自适应代码块
  38. var unityContainer = document.getElementById('unity-canvas');
  39. function unityContainerResize()
  40. {
  41. var w = window.innerWidth || document.body.clientWidth,
  42. h = window.innerHeight || document.body.clientHeight,
  43. ratio = 16 / 9,
  44. r = w/h;
  45. var setW, setH, setTop, setLeft;
  46. if (r >= ratio) { // 高度撑满
  47. setW = h * ratio;
  48. setLeft = (w - setW) / 2;
  49. } else { // 宽度撑满
  50. setH = w / ratio;
  51. setTop = (h - setH) / 2;
  52. }
  53. unityContainer.style.width = (setW || w) + 'px';
  54. unityContainer.style.height = (setH || h) + 'px';
  55. unityContainer.style.top = (setTop || 0) + 'px';
  56. unityContainer.style.left = (setLeft || 0) + 'px';
  57. }
  58. window.addEventListener('resize', unityContainerResize)
  59. unityContainerResize()
  60. </script>
  61. </body>
  62. <style>
  63. html
  64. {
  65. background-color: black;
  66. }
  67. </style>
  68. </html>