伪造Iframe尺寸以避免触发@media媒体查询

核心问题是iframe内部的页面会基于自身视口宽度触发媒体查询，而非父页面设置的iframe宽高。要实现仅在/static路由直接访问时生效媒体查询，iframe嵌入时强制桌面样式，可采用以下几种方法：

方法1：静态页面添加嵌入环境判断，动态控制媒体查询加载 #

在/static页面的HTML中，通过JS判断当前页面是否被iframe嵌入，仅当直接访问该路由时才加载媒体查询样式：

<!-- 在/static页面的<head>中添加 -->
<script>
const isInIframe = window.self !== window.top;
const isStaticRoute = window.location.pathname === '/static';

if (!isInIframe && isStaticRoute) {
  const style = document.createElement('style');
  style.textContent = `
    @media screen and (max-width: 708px) {
      #root {
        background-color: red;
      }
    }
  `;
  document.head.appendChild(style);
}
</script>

这样媒体查询规则只会在直接访问localhost:3000/static时生效，iframe嵌入场景不会加载这段CSS。

方法2：修改静态页面的viewport，强制iframe内使用桌面视口 #

在/static页面的meta viewport标签中，根据嵌入环境动态调整视口参数，让iframe内页面始终以桌面尺寸渲染：

<!-- 在/static页面的<head>中修改viewport -->
<meta id="viewportMeta" name="viewport" content="width=device-width, initial-scale=1.0">
<script>
const isInIframe = window.self !== window.top;
const viewportMeta = document.getElementById('viewportMeta');
if (isInIframe) {
  viewportMeta.content = 'width=1200, initial-scale=1.0';
}
</script>

强制将iframe内页面的视口宽度设为1200px，就不会触发max-width:708px的媒体查询规则。

方法3：在CSS中针对iframe环境覆盖媒体查询样式 #

给静态页面的body添加嵌入环境标识，再通过CSS覆盖媒体查询的样式：

/* 原媒体查询规则 */
@media screen and (max-width: 708px) {
  #root {
    background-color: red;
  }
}

/* 当页面在iframe中时，覆盖样式 */
@media screen and (max-width: 708px) {
  body[data-in-iframe] #root {
    background-color: initial;
  }
}

同时在静态页面的JS中添加环境标识：

const isInIframe = window.self !== window.top;
if (isInIframe) {
  document.body.dataset.inIframe = 'true';
}

内容的提问来源于stack exchange，提问作者Nilton Schumacher F