chenlei
/
crand-canal-museum


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
							<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>镇水安澜——运河守护神器的千年密码</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      #app-container {
        width: 100vw;
        height: 100vh;
        overflow-y: auto;
      }

      #app {
        width: 100%;
        height: 100%;
      }

      @media (max-width: 768px) and (orientation: portrait) {
        body:not(.in-iframe) #app-container {
          position: fixed;
          top: 50%;
          left: 50%;
          width: 100vh;
          height: 100vw;
          transform: translate(-50%, -50%) rotate(90deg);
          transform-origin: center center;
        }

        body:not(.in-iframe) #app {
          display: none;
        }

        body:not(.in-iframe) #app-iframe {
          display: block;
          width: 100%;
          height: 100%;
          border: none;
        }
      }

      body.in-iframe #app-container {
        width: 100%;
        height: 100%;
      }

      body.in-iframe #app-iframe {
        display: none;
      }

      #app-iframe {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app-container">
      <div id="app"></div>
      <iframe id="app-iframe"></iframe>
    </div>
    <script>
      if (window.self !== window.top) {
        document.body.classList.add("in-iframe");
      }

      if (window.self === window.top) {
        function handleOrientation() {
          const app = document.getElementById("app");
          const iframe = document.getElementById("app-iframe");

          if (
            window.innerWidth <= 768 &&
            window.innerHeight > window.innerWidth
          ) {
            app.style.display = "none";
            iframe.style.display = "block";
            if (!iframe.src) {
              const url = new URL(window.location.href);
              url.searchParams.set("iframe", "1");
              iframe.src = url.toString();
            }
          } else {
            app.style.display = "block";
            iframe.style.display = "none";
          }
        }

        handleOrientation();

        window.addEventListener("resize", handleOrientation);
        window.addEventListener("orientationchange", () => {
          setTimeout(handleOrientation, 100);
        });
      }
    </script>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>