如何实现iframe嵌入内容自适应PC与移动端不同尺寸屏幕

问题根源 #

你之前遇到的width:100%收缩到1cm、min/max-width不生效的核心原因是外层容器设置了display:inline-block但未指定宽度基准：inline-block元素默认按内容收缩宽度，iframe的百分比宽度找不到可参考的父容器宽度，就会出现异常收缩。而固定1024px宽度+写死0.7缩放值的方案只能匹配特定宽度的PC屏幕，在移动端必然溢出。

实现代码 #

直接替换原有代码即可，无需额外写多套媒体查询规则，自动适配手机到PC全尺寸屏幕：

<div class="responsive-iframe-wrap">
  <iframe
    src='https://nyheter24.se/nyheter/ekonomi/1037042-kryptosparare-kan-bli-blast-20-ganger-om-dagen#overlay-wrapper-outer-0'
    scrolling="auto"
    frameBorder="0"
    class="embedded-news-iframe"
  ></iframe>
</div>

<style>
.responsive-iframe-wrap {
  width: 100%;
  max-width: 1024px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  /* 声明容器查询基准，用于动态计算缩放比例 */
  container-type: inline-size;
  /* 按裁切后的内容比例设置容器高度 */
  aspect-ratio: 1024 / 380;
}

.embedded-news-iframe {
  /* 固定iframe原始渲染尺寸，和你原有PC端正常显示的参数一致 */
  width: 1024px;
  height: 800px;
  /* 保留原有偏移参数，裁切不需要的页面头部、侧边区域 */
  margin-top: -180px;
  margin-left: -200px;
  border: 0;
  /* 核心：根据容器宽度动态计算缩放比例，始终撑满容器 */
  transform: scale(calc(100cqw / 1024));
  transform-origin: top left;
}

/* 兼容不支持aspect-ratio的老旧浏览器 */
@supports not (aspect-ratio: 1 / 1) {
  .responsive-iframe-wrap {
    height: 0;
    padding-bottom: 37.1%;
  }
  .embedded-news-iframe {
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>

<!-- 针对不支持CSS容器查询的极老浏览器的JS兜底，可选添加 -->
<script>
if (!CSS.supports('container-type: inline-size')) {
  const wrap = document.querySelector('.responsive-iframe-wrap')
  const iframe = document.querySelector('.embedded-news-iframe')
  const calcScale = () => {
    const scale = wrap.clientWidth / 1024
    iframe.style.transform = `scale(${scale})`
    wrap.style.height = `${620 * scale}px`
  }
  calcScale()
  window.addEventListener('resize', calcScale)
}
</script>

关键逻辑说明 #

• 外层容器改为块级元素，宽度100%撑满父级，设置max-width:1024px避免大屏下iframe过度放大模糊，配合margin:0 auto在PC端居中显示
• 缩放值不再写死0.7，通过容器查询单位cqw动态计算：不管容器宽度是320px的手机屏还是1024px的PC屏，都会自动算出匹配的缩放比例，让iframe刚好撑满容器不溢出
• 保留了你之前调试好的margin偏移参数，裁切效果和你原有PC端显示效果完全一致
• 兼容逻辑覆盖了99%以上的新旧浏览器，不需要额外判断设备类型

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