58 lines
1.7 KiB
HTML
58 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>scale 验证</title>
|
||
<style>
|
||
body { margin: 0; background: #14161b; font-family: -apple-system, "PingFang SC", sans-serif; color: #e8e6e1; }
|
||
.wrap { max-width: 1080px; margin: 40px auto; padding: 0 24px; }
|
||
h2 { font-size: 14px; font-weight: 500; color: #9a968e; margin-bottom: 12px; }
|
||
|
||
/* 关键结构：视口容器 → 缩放盒 → 固定逻辑尺寸的 iframe */
|
||
.demo-viewport {
|
||
position: relative;
|
||
overflow: hidden;
|
||
border-radius: 12px;
|
||
border: 1px solid #2b2e36;
|
||
background: #000;
|
||
}
|
||
.demo-scale {
|
||
transform-origin: top left;
|
||
width: 1400px; /* 逻辑布局宽度：内部永远按 1400px 桌面排版 */
|
||
height: 860px;
|
||
}
|
||
.demo-scale iframe {
|
||
width: 1400px;
|
||
height: 860px;
|
||
border: none;
|
||
display: block;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<h2>演示区（容器宽 1032px，iframe 内部按 1400px 排版后等比缩至 0.737）</h2>
|
||
<div class="demo-viewport" id="viewport">
|
||
<div class="demo-scale" id="scaleBox">
|
||
<iframe src="/demo.html" title="Astrion 演示"></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 等比缩放：容器实际宽度 / 逻辑宽度
|
||
var LOGICAL_W = 1400, LOGICAL_H = 860;
|
||
var viewport = document.getElementById('viewport');
|
||
var scaleBox = document.getElementById('scaleBox');
|
||
function fit() {
|
||
var w = viewport.clientWidth;
|
||
var s = w / LOGICAL_W;
|
||
scaleBox.style.transform = 'scale(' + s + ')';
|
||
viewport.style.height = (LOGICAL_H * s) + 'px';
|
||
}
|
||
new ResizeObserver(fit).observe(viewport);
|
||
fit();
|
||
</script>
|
||
</body>
|
||
</html>
|