Iframe多次嵌套导致的页面内容不适配系统缩放比例

问题描述

项目A中使用iframe打开项目B，项目B中又使用了4个iframe分别打开C1、C2、C3、C4。

所有的页面都是以1920*1080的屏幕分辨率为参考进行开发，而且我们也在各种电脑屏幕分辨率下进行了调试，认为页面都没问题。

没想到的是有一天客户反映：项目A中的字体大小和项目C1、C2、C3、C4的字体大小比例相差很大。

细问之下，是因为客户将Windows电脑的系统显示缩放比例调高了，比如电脑屏幕分辨率为1920*1080，推荐缩放比例为100%，这时候将缩放比列调整为150%。

就导致了最外层的项目A字体放大了1.5倍，而项目C1、C2、C3、C4的字体却没有放大。仔细研究发现这是iframe多层嵌套导致的问题，iframeB会跟随系统缩放，再往里的iframeC1、C2、C3、C4就不会跟随系统缩放了。

刚开始想的是通过项目A获取iframe元素，然后根据屏幕尺寸动态更改iframe的zoom，达到一劳永逸的效果。想法是美好的，但实际发现并不起作用。

无奈之下尝试在C1、C2、C3、C4项目中通过代码获取屏幕宽度，然后动态更改document的zoom。

      // 屏幕尺寸
      const screenWidth = window.screen.width;
      this.zoom = 1920 / screenWidth;
      const documentBody = document.documentElement;
      if(documentBody){
        document.documentElement.style.zoom = this.zoom
      }

因为我们项目的页面都是基于1920*1080的尺寸进行设计的，所以这里获取屏幕尺寸之后与1920进行比较就得到了页面需要进行缩放的比例。经过测试发现C1、C2、C3、C4能够跟随系统缩放比列进行放大或缩小，问题完美解决！