如何让网站适配所有屏幕尺寸？解决iframe跨分辨率尺寸统一问题

先分析你原代码的问题 #

1. iframe的src属性为空，需先填上目标链接才能正常加载内容
2. 使用百分比高度时，父元素（包括<body>和<html>）必须设置明确高度，否则百分比规则不生效
3. 未引入jQuery的情况下，$函数会直接报错，导致JS代码失效
4. 仅初始化时设置高度，窗口尺寸变化时不会自动更新iframe高度

方案1：固定尺寸（所有屏幕下大小完全一致） #

如果要让iframe在任意屏幕下都保持相同的固定宽高，直接设置像素值即可，无需JS：

<p align="center">
  <iframe src="https://spew45.github.io/games/drift-boss.html" style="width: 800px; height: 600px; border: 0; border-radius: 0; margin-top: 20px;"></iframe>
</p>

按需调整width和height的像素值即可，超出屏幕范围的部分会自动出现滚动条。

方案2：固定比例+自适应屏幕（响应式但比例不变） #

如果要让iframe适配屏幕宽度，同时保持固定比例（比如游戏常用的16:9），可以利用padding-top技巧（padding的百分比基于父元素宽度计算）：

<style>
.iframe-wrap {
  position: relative;
  width: 50%; /* 占屏幕宽度的50%，可改为100%实现全屏适配 */
  max-width: 800px; /* 限制最大宽度，防止屏幕过大时iframe超出合理尺寸 */
  margin: 20px auto 0; /* 水平居中，保留20px上边距 */
  padding-top: 56.25%; /* 16:9比例，计算方式为9÷16=0.5625 */
}
.iframe-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}
</style>

<div class="iframe-wrap">
  <iframe src="https://spew45.github.io/games/drift-boss.html"></iframe>
</div>

这个方案下，iframe会随屏幕宽度缩放，但始终保持设定的比例，完美适配所有分辨率。

方案3：修复你的原代码（基于窗口高度的动态尺寸） #

如果坚持用JS设置窗口高度的百分比，需要先给根元素设置高度，引入jQuery并监听窗口尺寸变化：

<style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>

<p align="center">
  <iframe src="https://spew45.github.io/games/drift-boss.html" style="width: 50%; border: 0; border-radius: 0; margin-top: 20px;" class="myIframe"></iframe>
</p>

<!-- 先引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
// 定义设置iframe高度的函数
function setIframeHeight() {
  $('.myIframe').css('height', $(window).height() * 0.5 + 'px'); // 取窗口高度的50%
}

// 页面初始化时执行一次
setIframeHeight();
// 窗口大小变化时重新计算高度
$(window).on('resize', setIframeHeight);
</script>

内容的提问来源于stack exchange，提问作者Spewy