index.html 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <!DOCTYPE html>
  2. <!-- <html manifest="manifest.mf"> -->
  3. <html>
  4. <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <meta name="apple-mobile-web-app-capable" content="yes">
  6. <meta http-equiv="Cache-Controle" content="public">
  7. <meta name="viewport" content="user-scalable=no, initial-scale=1">
  8. <title>雷霆机战</title>
  9. <style type="text/css">
  10. html,body {
  11. background-color: #1a1a1a;
  12. color: #fff;
  13. font-family: helvetica, arial, Microsoft Yahei, 微软雅黑, STXihei, 华文细黑, sans-serif;
  14. margin: 0;
  15. padding: 0;
  16. font-size: 12pt;
  17. width: 100%;
  18. }
  19. #canvas {
  20. position: relative;
  21. display: block;
  22. image-rendering: optimizeSpeed;
  23. -ms-interpolation-mode: nearest-neighbor;
  24. -webkit-optimize-contrast;
  25. }
  26. </style>
  27. <!--Google Analytics-->
  28. </head>
  29. <body>
  30. <div id="wrapper" style="width: 444px; height: 666px; position: absolute; left: 0px; top: 0px; right: 0px; margin: auto;">
  31. <canvas id="canvas" style="width: 444px; height: 666px;" width="320" height="480"></canvas>
  32. </div>
  33. <img id="rotate" src="media/en/rotation_logo.png" style="display: none; position: absolute; top: 0px; left: 0px;">
  34. <script type="text/javascript">
  35. window.scrollTo(0, 1);
  36. var gameHeight = window.innerHeight;
  37. var gameWidth = window.innerWidth;
  38. var wrapper=document.getElementById('wrapper');
  39. var scaleToFitX = gameWidth / 320;
  40. var scaleToFitY = gameHeight / 480;
  41. var currentScreenRatio = gameWidth / gameHeight;
  42. var optimalRatio = Math.min(scaleToFitX, scaleToFitY);
  43. if (currentScreenRatio >= 1.77 && currentScreenRatio <= 1.79) {
  44. canvas.style.width = gameWidth + "px";
  45. canvas.style.height = gameHeight + "px";
  46. wrapper.style.width = gameWidth + "px";
  47. wrapper.style.height = gameHeight + "px";
  48. } else {
  49. canvas.style.width = 320 * optimalRatio + "px";
  50. canvas.style.height = 480 * optimalRatio + "px";
  51. wrapper.style.width = 320 * optimalRatio + "px";
  52. wrapper.style.height = 480 * optimalRatio + "px";
  53. }
  54. </script>
  55. <script type="text/javascript" src="./js/game.min.js"></script>
  56. </body></html>