<!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，不知道可不可行
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图
