如何让Div模拟独立viewport？无需修改内容CSS实现多视口展示

当然可以搞定！完全不用碰content x的原有CSS，下面给你两个实用的方案，优先推荐第一个，兼容性和效果都更稳：

方案一：用<iframe>独立隔离viewport #

这是最靠谱的方法，因为iframe拥有自己独立的文档环境和viewport设置，完美模拟移动端的渲染逻辑：

• 第一步：把content x的内容抽成一个单独的小HTML文件（比如mobile-content.html），在这个文件里保留原有的viewport meta标签：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

  （如果不想单独建文件，也可以用data URI嵌入，但单独文件维护起来更方便）

• 第二步：在你的主页面里，Div2就放这个iframe，设置好固定宽度：

  <div class="div1">
    <!-- 直接放content x，桌面版渲染 -->
    [content x的内容]
  </div>
  <div class="div2">
    <iframe src="mobile-content.html" width="320" frameborder="0" scrolling="no"></iframe>
  </div>
  

• 第三步：如果需要让iframe高度自适应内容，可以加一点简单的JS（同源情况下）：

  const iframe = document.querySelector('div.div2 iframe');
  iframe.onload = function() {
    iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
  };
  

这样一来，桌面端访问时，Div1里的content x会根据页面的viewport渲染成桌面版，而Div2里的iframe因为有独立的移动端viewport，content x就会完全按照移动端的逻辑展示，完美达成需求。

方案二：CSS缩放（局限性较大，仅作补充） #

这个方法适合不想用iframe的场景，但有个前提：content x的布局逻辑不依赖媒体查询（或者媒体查询的断点刚好和缩放比例匹配）：

• 计算缩放比例：假设你的桌面端页面viewport宽度为W，content x在移动端320px viewport下的布局，要在320px的Div里模拟，其实可以通过缩放让content x“以为”自己在320px的viewport里。不过这里要注意，媒体查询还是会基于页面的viewport，所以如果content x有@media (max-width: 768px)这类规则，桌面端页面宽度超过768px的话，这些媒体查询不会触发，所以这个方法只适合content x的布局完全基于容器宽度，或者媒体查询断点刚好适配缩放后的情况。

• 示例CSS：

  .div2 {
    width: 320px;
    overflow: hidden;
  }
  .div2 .content-x {
    transform: scale(calc(320 / 100)); /* 假设content x原本是按100vw渲染，这里缩放成320px容器的比例 */
    transform-origin: top left;
    width: 100vw;
    height: auto;
  }
  

  这个方法的局限性很明显，所以优先还是用iframe方案。

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