找回密码
 立即注册

QQ登录

只需一步,快速开始

515275362

中级会员

57

主题

207

帖子

702

积分

中级会员

积分
702
515275362
中级会员   /  发表于:2024-8-8 10:48  /   查看:1207  /  回复:8
1金币
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Babylon.js 横屏显示</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    #iframe-container {
      width: 100vh;
      width: 100dvh;
      height: 100vw;
      height: 100dvw;
      position: relative;
      overflow: hidden;
      transform-origin: 0 0;
      transform: rotate(90deg) translateY(-100%);
    }

    #babylon-iframe {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      border: none;
    }
  </style>
  <script>
    // 防抖函数
    function debounce(func, delay) {
      let timer;
      return function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
          func.apply(this, arguments);
        }, delay);
      };
    }

    let resize = () => {
      if (window.innerWidth > window.innerHeight) {
        iframeContainer.style.width = "100vw";
        iframeContainer.style.width = "100dvw";
        iframeContainer.style.height = "100vh";
        iframeContainer.style.height = "100dvh";
        iframeContainer.style.transform = "rotate(0deg) translateY(0%)";

      } else {
        iframeContainer.style.width = "100vh";
        iframeContainer.style.width = "100dvh";
        iframeContainer.style.height = "100vw";
        iframeContainer.style.height = "100dvw";
        iframeContainer.style.transform = "rotate(90deg) translateY(-100%)";
      }
    };
    let iframeContainer;
    document.addEventListener('DOMContentLoaded', () => {
      iframeContainer = document.getElementById("iframe-container");
      resize();
    });
      window.addEventListener('resize', debounce(resize, 250)); // 延迟 250 毫秒执行
      //全屏函数
      function fullScreen() {
          alert("dsfds");
          var el = document.documentElement;
          var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) || (document.mozFullScreenElement && document.mozFullScreenElement !== null) || (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) || (document.msFullscreenElement && document.msFullscreenElement !== null);

          if (!isInFullScreen) {
              if (el.requestFullscreen) {
                  el.requestFullscreen();
              } else if (el.mozRequestFullScreen) {
                  el.mozRequestFullScreen();
              } else if (el.webkitRequestFullscreen) {
                  el.webkitRequestFullscreen();
              } else if (el.msRequestFullscreen) {
                  el.msRequestFullscreen();
              }
          } else {
              if (document.exitFullscreen) {
                  document.exitFullscreen();
              } else if (document.mozCancelFullScreen) {
                  document.mozCancelFullScreen();
              } else if (document.webkitExitFullscreen) {
                  document.webkitExitFullscreen();
              } else if (document.msExitFullscreen) {
                  document.msExitFullscreen();
              }
          }
      }
  </script>
</head>
<body>
<div id="iframe-container">
  <iframe id="babylon-iframe" src="http://192.168.1.116:8080/shuhe31_%E9%AB%98%E8%B4%A8%E9%87%8F"></iframe>
</div>

</body>
</html>

麻烦大佬帮忙使用活字格实现以上html,不知道可不可行

最佳答案

查看完整内容

直接给对应组件设置类名就可以啦~~

8 个回复

倒序浏览
最佳答案
最佳答案
Nathan.guo活字格认证 Wyn认证
超级版主   /  发表于:2024-8-8 10:48:24
来自 9#
515275362 发表于 2024-8-13 13:33
大佬 活字格中在哪边设置类名

直接给对应组件设置类名就可以啦~~

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
Nathan.guo活字格认证 Wyn认证
超级版主   /  发表于:2024-8-8 14:42:14
2#
我们可以先把咱们的html保存到一个文件,然后打开设计器,点击打开资源文件夹,把html问价你放在这个文件夹下


然后回到页面,使用签入自定义html页面单元格,并指定页面名称即可

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
515275362
中级会员   /  发表于:2024-8-8 15:19:20
3#
Nathan.guo 发表于 2024-8-8 14:42
我们可以先把咱们的html保存到一个文件,然后打开设计器,点击打开资源文件夹,把html问价你放在这个文件夹 ...

谢谢大佬,如果非得用活字格对应html中的div css js id  有办法弄吗?
回复 使用道具 举报
515275362
中级会员   /  发表于:2024-8-8 16:24:59
4#
Nathan.guo 发表于 2024-8-8 14:42
我们可以先把咱们的html保存到一个文件,然后打开设计器,点击打开资源文件夹,把html问价你放在这个文件夹 ...

由于这个网页必须在最外层,才能达到强制横屏的效果,不易在用嵌套的方法
回复 使用道具 举报
Nathan.guo活字格认证 Wyn认证
超级版主   /  发表于:2024-8-9 09:53:31
5#
想了下,大佬如果不想再嵌套一层的话,可以利用JS命令,获取想要设置的div,并设置对应的样式就行

活字格在设计器里可以给对应元素设置类名,然后可以通过classname获取元素

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
515275362
中级会员   /  发表于:2024-8-9 09:55:29
6#
Nathan.guo 发表于 2024-8-9 09:53
想了下,大佬如果不想再嵌套一层的话,可以利用JS命令,获取想要设置的div,并设置对应的样式就行

活字 ...

谢谢,请问怎么设置div,怎么设置样式,怎么设置id,用代码
回复 使用道具 举报
Nathan.guo活字格认证 Wyn认证
超级版主   /  发表于:2024-8-9 17:50:25
7#
515275362 发表于 2024-8-9 09:55
谢谢,请问怎么设置div,怎么设置样式,怎么设置id,用代码

可以参考下:

https://blog.csdn.net/xiamoziqian/article/details/85051947

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
515275362
中级会员   /  发表于:2024-8-13 13:33:44
8#
Nathan.guo 发表于 2024-8-9 17:50
可以参考下:

https://blog.csdn.net/xiamoziqian/article/details/85051947

大佬 活字格中在哪边设置类名
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部