chenwb
/
ClientFrameWork


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
							<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

  <title>Cocos Creator | zhetian</title>

  <!--http://www.html5rocks.com/en/mobile/mobifying/-->
  <meta name="viewport"
    content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1,viewport-fit=cover" />

  <!--https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html-->
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="format-detection" content="telephone=no">

  <!-- force webkit on 360 -->
  <meta name="renderer" content="webkit" />
  <meta name="force-rendering" content="webkit" />
  <!-- force edge on IE -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="msapplication-tap-highlight" content="no">

  <!-- force full screen on some browser -->
  <meta name="full-screen" content="yes" />
  <meta name="x5-fullscreen" content="true" />
  <meta name="360-fullscreen" content="true" />

  <!-- force screen orientation on some browser -->
  <meta name="screen-orientation" content="portrait" />
  <meta name="x5-orientation" content="portrait">

  <!--fix fireball/issues/3568 -->
  <!--<meta name="browsermode" content="application">-->
  <meta name="x5-page-mode" content="app">

  <!--<link rel="apple-touch-icon" href=".png" />-->
  <!--<link rel="apple-touch-icon-precomposed" href=".png" />-->

  <script type="text/javascript">
    var sUserAgent = navigator.userAgent.toLowerCase();
    var link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    if (/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(sUserAgent)) {
      //移动端
      console.log("移动端")
      link.href = 'style-mobile.css';
      document.getElementsByTagName('head')[0].appendChild(link);
    } else {
      //pc端   
      console.log("pc端")
      link.href = 'style-desktop.css';
      document.getElementsByTagName('head')[0].appendChild(link);
    }
  </script>
  <link rel="icon" href="favicon.ico" />
</head>

<body>
  <style type="text/css">
    html {
      overflow-x: hidden;
      overflow-y: hidden;
      width: 100%;
      height: 100%;
      -webkit-text-size-adjust: 100%;
      /* 确保iOS设备上的安全区域也被覆盖 */
      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    }

    /* 将背景图片应用到整个页面 */
    body {
      background-image: url('background.d7add.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      margin: 0;
      padding: 0;
      height: 100vh;
      width: 100vw;
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      /* 确保iOS设备上内容不会被底部栏遮挡 */
      padding-bottom: env(safe-area-inset-bottom);
      /* 启用硬件加速 */
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }

    /* 移除GameDiv的背景图片 */
    #GameDiv {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      /* 确保在iOS设备上完全覆盖屏幕 */
      max-width: 100vw;
      max-height: 100vh;
      /* 启用硬件加速 */
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }

    /* 确保画布在背景上方 */
    #GameCanvas {
      position: fixed;
      z-index: 1;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      object-fit: cover;
      /* 启用硬件加速 */
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
  </style>
  <div id="GameDiv">
    <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
    <div id="splash">
      <div class="progress-bar stripes">
        <span style="width: 0%"></span>
      </div>
    </div>
  </div>
  <script src="src/settings.js" charset="utf-8"></script>
  <script type="text/javascript" src="//h5sdk.szzyqw.com/js/api/h5asdk.api.js"></script>
  <script src="main.js" charset="utf-8"></script>
  <!-- 开启vConsole -->
  <!-- <script src="vconsole.min.26a31.js"></script> -->
  
  <script type="text/javascript">
    (function () {
      // open web debugger console
      if (typeof VConsole !== 'undefined') {
        window.vConsole = new VConsole();
      }

      // 修复iOS Safari右侧黑屏问题
      function updateGameDivSize() {
        var height = window.innerHeight || document.documentElement.clientHeight;
        var width = window.innerWidth || document.documentElement.clientWidth;
        var gameDiv = document.getElementById('GameDiv');
        
        // 在iOS设备上，强制使用100%宽度以避免右侧黑屏
        var isIOS = /ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase());
        
        if (isIOS) {
          // iOS设备上使用100%宽度，确保完全覆盖屏幕
          gameDiv.style.width = '100%';
          gameDiv.style.height = '100%';
          gameDiv.style.left = '0';
          gameDiv.style.right = '0';
          // 强制重绘以解决某些iOS版本的渲染问题
          document.body.style.display = 'none';
          setTimeout(function() {
            document.body.style.display = '';
          }, 0);
        } else {
          // 非iOS设备使用原来的计算方式
          var fixWidth = height / 1334 * 750;
          gameDiv.style.height = `${height}px`;
          if (fixWidth > width) {
            gameDiv.style.width = `${width}px`;
          } else {
            gameDiv.style.width = `${fixWidth}px`;
          }
        }
      }
      
      // 初始调整大小
      updateGameDivSize();
      
      // 添加视口调整事件监听
      window.addEventListener('resize', updateGameDivSize, false);
      
      // iOS设备上，添加orientationchange事件监听
      if (/ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase())) {
        window.addEventListener('orientationchange', function() {
          // 延迟执行以确保iOS完成旋转
          setTimeout(updateGameDivSize, 200);
        }, false);
      }

      var debug = window._CCSettings.debug;
      var splash = document.getElementById('splash');
      splash.style.display = 'block';

      function loadScript(moduleName, cb) {
        function scriptLoaded() {
          document.body.removeChild(domScript);
          domScript.removeEventListener('load', scriptLoaded, false);
          cb && cb();
        };
        var domScript = document.createElement('script');
        domScript.async = true;
        domScript.src = moduleName;
        domScript.addEventListener('load', scriptLoaded, false);
        document.body.appendChild(domScript);
      }

      loadScript(debug ? 'cocos2d-js.js' : 'cocos2d-js-min.6f011.js', function () {
        if (CC_PHYSICS_BUILTIN || CC_PHYSICS_CANNON) {
          loadScript(debug ? 'physics.js' : 'physics-min.js', window.boot);
        }
        else {
          window.boot();
        }
      });
    })();
  </script>
</body>

</html>