67 lines
1.9 KiB
HTML
67 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="icon" type="image/svg+xml" href="https://xxl-1313840333.cos.ap-guangzhou.myqcloud.com/urm/logo.png" />
|
|
<title>学小乐</title>
|
|
<style>
|
|
body,
|
|
iframe {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.main {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: #000;
|
|
}
|
|
|
|
.main .iframe {
|
|
width: 1920px;
|
|
height: 1200px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="main">
|
|
<iframe id="iframe" class="iframe" frameborder="0"
|
|
allowfullscreen="true"
|
|
webkitallowfullscreen="true"
|
|
mozallowfullscreen="true"></iframe>
|
|
</div>
|
|
<script>
|
|
const iframeRef = document.querySelector('.iframe');
|
|
function resize() {
|
|
const { innerWidth, innerHeight } = window;
|
|
const rate = innerWidth / innerHeight;
|
|
const baseRate = 1920 / 1200;
|
|
if (rate > baseRate) {
|
|
iframeRef.style.width = innerHeight * 1920 / 1200 + 'px';
|
|
iframeRef.style.height = innerHeight + 'px';
|
|
} else {
|
|
iframeRef.style.width = innerWidth + 'px';
|
|
iframeRef.style.height = innerWidth * 1200 / 1920 + 'px';
|
|
}
|
|
}
|
|
resize();
|
|
window.addEventListener('resize', resize);
|
|
const host = 'http://localhost'
|
|
if (location.pathname !== '/') {
|
|
document.getElementById('iframe').src = host + location.pathname + location.search
|
|
}else{
|
|
document.getElementById('iframe').src = host
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |