如何在HTML中创建第二个视口？优先无需iframe

1. CSS容器查询（首推） #

这是目前最直接的原生方案，主流浏览器都支持。给模拟视口的容器开启容器查询后，组件里的样式就能基于容器尺寸触发，和真实视口的媒体查询逻辑一致。

代码示例：

<!-- 可拖拽调整大小的模拟视口容器 -->
<div class="simulated-viewport">
  <!-- 你的组件 -->
  <div class="your-component">
    这里是组件内容
  </div>
</div>

.simulated-viewport {
  container-type: inline-size; /* 关键：开启容器查询 */
  resize: both; /* 允许手动拖拽调整尺寸 */
  overflow: auto; /* 内容超出时显示滚动条 */
  border: 1px solid #ccc;
  min-width: 320px; /* 设个最小宽度，模拟手机最小尺寸 */
  min-height: 480px;
}

/* 基于容器宽度的样式规则，类似媒体查询 */
@container (max-width: 768px) {
  .your-component {
    font-size: 14px;
    padding: 8px;
    background: #f5f5f5;
  }
}

@container (min-width: 769px) {
  .your-component {
    font-size: 16px;
    padding: 16px;
    background: #fff;
  }
}

• 好处：纯CSS实现，不用写JS，调整容器大小会实时触发样式变化，和真实响应式逻辑完全对齐。
• 小提示：可以用cqw/cqh这类容器相对单位，和vw/vh逻辑一样，但基于容器尺寸而非页面视口。

2. JS+CSS变量模拟（兼容旧浏览器） #

如果要兼容不支持容器查询的老浏览器，可以用JS监听容器尺寸变化，给组件加状态标记，再写对应样式。

代码示例：

<div class="simulated-viewport" id="viewport">
  <div class="your-component">
    这里是组件内容
  </div>
</div>

.simulated-viewport {
  resize: both;
  overflow: auto;
  border: 1px solid #ccc;
  min-width: 320px;
  min-height: 480px;
}

.your-component {
  font-size: 16px;
  padding: 16px;
}

/* 根据组件的data属性切换样式 */
.your-component[data-screen="mobile"] {
  font-size: 14px;
  padding: 8px;
  background: #f5f5f5;
}

const viewport = document.getElementById('viewport');
const component = viewport.querySelector('.your-component');

// 更新组件样式的函数
function updateStyle() {
  const width = viewport.offsetWidth;
  // 按宽度阈值切换状态
  component.dataset.screen = width <= 768 ? 'mobile' : 'desktop';
}

// 初始化时执行一次
updateStyle();
// 监听容器拖拽调整的resize事件
viewport.addEventListener('resize', updateStyle);
// 监听窗口大小变化（如果容器尺寸受窗口影响）
window.addEventListener('resize', updateStyle);

• 好处：兼容旧浏览器，逻辑灵活，可以自定义阈值和状态。
• 缺点：需要写JS，样式和JS有一定耦合。

3. 无外部src的iframe（备选） #

如果上面的方案都不满足，也可以用iframe但不用外部链接，直接把组件内容写入iframe里，这样也是独立视口，媒体查询和真实设备一致。

代码示例：

<iframe id="simulator" frameborder="1" style="resize: both; overflow: auto; min-width:320px; min-height:480px;"></iframe>

<script>
const iframe = document.getElementById('simulator');
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

// 直接往iframe里写组件的HTML和样式
iframeDoc.write(`
<!DOCTYPE html>
<html>
<head>
  <style>
    .your-component {
      font-size: 16px;
      padding: 16px;
    }
    /* 这里的媒体查询基于iframe的视口尺寸 */
    @media (max-width: 768px) {
      .your-component {
        font-size:14px;
        padding:8px;
        background: #f5f5f5;
      }
    }
  </style>
</head>
<body>
  <div class="your-component">
    这里是组件内容
  </div>
</body>
</html>
`);
iframeDoc.close();
</script>

• 好处：完全独立的视口，和真实浏览器的响应式逻辑完全一致。
• 缺点：iframe和主页面是不同的上下文，组件和主页面的交互需要额外处理（比如postMessage）。

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