iframe H5内外viewport不一致导致的样式错乱

问题

当我的H5项目嵌套一个iframe时，发现样式会错乱,但是单独打开样式是正常的,后面发现iframe嵌套的页面viewport视口initial-scale与主页的不一致。

// iframe 
<meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=1,minimum-scale=0.5,user-scalable=no">

// 主页

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

原因

iframe的特性当内外 viewport 不一致时，将会使用主页面的 viewport，因此导致iframe的样式错乱

解决

iframe是第三方的，是无法修改的，只能从我们这边去适配

1. 将iframe 的宽度和高度都设置为视口的两倍（即 200vw 和 200vh），使其占据整个屏幕。

2. 将iframe 的定位方式设置为绝对定位，将其放置在页面左上角

3. 将iframe 的缩放比例设置为 0.5，这样便可以覆盖iframe中的viewport属性，以确保页面缩放一致

  <iframe id="iframe" src="https://example.com" frameborder="0"></iframe>

  <!-- 样式 -->
   iframe {
    width: 200vw;
    height: 200vh;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(0.5);
    transform-origin: 0 0;
  }