页面ifream固定分辨率展示并适配所有分辨率方法

        实现方式：

        以ifream要完整展示1920*1080大屏为例：

        将ifream本身进行相对于1920*1080的等比例放大，然后再使用transform对ifream进行相对于1920*1080的等比例缩小，然后再将放缩之后的ifream进行平移至页面正中间，实现铺满整个屏幕。

        效果实现：

        虽然网页展示的只是一个ifream，但是还需要在该ifram外面再包一层父级div，

<div className={styles.iframeDiv}> 
    <iframe id="iframe12138" className={styles.iframe} src={url} frameBorder="0" /> 
</div>

        css样式设置：

  .iframeDiv{
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .iframe{
      position: absolute;
      top: 0;
      left: 0
    }
    .iframe::-webkit-scrollbar {
      display:none;
    }
  }

        此时展示效果是这样的：

        将ifream设置铺满整个屏幕需要用到css属性transform，通过transform设置ifream的放缩比例，然后通过transform下的translate对其进行相应的位移使其移到屏幕的正中间。但首先要对ifream进行等比例放大：

        思路：先获取当前屏幕的宽高，然后再以1920和1080分别除以当前宽高，然后乘上100就得到了ifream的相对于当前分辨率的放大比例。

let width = (1920 / window.screen.width) * 100; 
let height= (1080/ window.screen.height) * 100;

        以736*414的iphone 6/7/8plus的分辨率为例，这样得到的放大倍数为：

        然后再对其进行相对于1920*1080的等比例缩小：

let scaleX = window.screen.width / 1920; 
let scaleY = window.screen.height/ 1080;

        还是以以736*414的iphone 6/7/8plus的分辨率为例，此时缩小比例为：

        此时的效果为：

        由效果可知要将缩小后的ifream进行向上向左平移：

        实现这个效果用translate进行平移即可

let translateX = -(((1920 / window.screen.width) * 100) / 2 - 50);
let translateY = -(((1080/ window.screen.height) * 100) / 2 - 50);

        将上面所说的所有计算通过style对ifream进行样式设置可得：

let width = (1920 / window.screen.width) * 100;
let height= (1080/ window.screen.height) * 100;
let scaleX = window.screen.width / 1920;
let scaleY = window.screen.height/ 1080;
let translateX = -(((1920 / window.screen.width) * 100) / 2 - 50);
let translateY = -(((1080/ window.screen.height) * 100) / 2 - 50);
 
<div className={styles.iframeDiv}>
  <iframe
    id="iframe12138"
    style={{
      width: `${width}%`,
      height: `${height}%`,
      transform: 
      `scale(${scaleX},${scaleY}) 
      translate(${translateX}%,${translateY}%)`,
    }}
    className={styles.iframe}
    src={iframeData}
    frameBorder="0"
  />
</div>

        也可以这样写：

<div className={styles.iframeDiv}>
  <iframe
    id="iframe12138"
    style={{
      width: `${(1920 / window.screen.width) * 100}%`,
      height: `${(1080 / window.screen.height) * 100}%`,
      transform: `scale(${window.screen.width / 1920},${
        window.screen.height / 1080
      }) translate(${-(((1920 / window.screen.width) * 100) / 2 - 50)}%,${-(
        ((1080 / window.screen.height) * 100) / 2 -
        50
      )}%)`,
    }}
    className={styles.iframe}
    src={iframeData}
    frameBorder="0"
  />
</div>

        效果：

        方法总结：

        本方法的实现的思路逻辑为将ifream进行相对于当前分辨率下进行放大，就比如ifream需要固定展示1920*1080分辨率下的展示效果，但是当前分辨率只有768*414，就对ifream进行放大，使其放大后的宽高为1920*1080。此时再用scale进行放缩处理，放缩并不会改变分辨率，放缩倍数为1920*1080缩小到768*414的倍率，缩小后再计算平移量，通过translate进行平移到页面正中心。本方法的难点就是在于放大倍数的计算，缩小倍数的计算还有平移量的计算。该方法不仅仅适用于固定展示1920*1080，其他任何分辨率都可以适用，就比如说需要ifream固定展示1600*900或者1366*168都可以适用该方法，就是需要将计算式中的1920*1080替换成需要固定的分辨率的宽高即可。

        使用算法展示效果：

        手机端展示效果：

        ipad端展示效果：

        1920*1080分辨率下展示效果：

        可以看到在使用这个算法之后无论是哪个分辨率下，展示效果都与1920*1080展示效果相同。

        未使用算法展示效果：

        手机端：

        ipad端：

        pc端1920*1080：

        可以看到当使用该算法来计算ifream的高度的时候，无论怎样变换分辨率，ifream的展示形式一直维持在1920*1080。