71 lines
1.7 KiB
HTML
71 lines
1.7 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" href="/logo.ico" />
|
|
<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>
|