Internet explorer Office加载项-视口大小问题

我正在使用Angular 5开发Office Word插件。我有一个奇怪的问题，每次单击任何管线链接都会将视口缩放级别缩小一个小百分比，直到所有内容都非常小。我已将定位策略设置为哈希

• 我已经删除了所有css，但仍然遇到这个问题
• 尝试使用或不使用视口元标记和@-ms视口css属性以及各种设置
• 尝试将X-UA兼容元标记设置为不同版本的IE

想知道是否有人有过类似的经历

更新：

我尝试了以下加载项，并通过单击路由链接遇到了相同的问题。

办公室加载项
加载。。。

主模板

<div class="root-navigation">
    <div class="navigation-links">
        <a routerLink="/tab1" [routerLinkActive]="['active']">
            Tab 1
        </a>
        <a routerLink="/tab2" [routerLinkActive]="['active']">
            Tab 2
        </a>
    </div>
</div>
<div class="root-viewport">
    <router-outlet></router-outlet>
</div>

表1
表2

注意：此答案不会包含问题的解决方案，因为它太长，无法作为注释发布

---

TL；DR：Word 2016中的Windows中似乎存在一个bug，它会影响使用Angular路由器的OfficeJS加载项的

window.devicePixelRatio

。使用IE11或Chrome的Word Online上不会出现此错误

版本号：

Windows 10:
1709版（操作系统版本16299.125）

Word 2016:
1801版（Build 8911.2016点击运行）（Office Insider）
WordApi 1.3

Internet Explorer 11:
版本11.125.16299.0
更新版本：11.0.49（KB4052978）

---

更长的版本：我也注意到了这一点，并认为这是Angular的路由器。通过记录

window.devicePixelRatio

的值，我可以看到它的值随着每个路由器的导航而稳步下降。考虑到这一点，真奇怪

所以我花了一些时间来准备

然而，我无法用我在Chrome和IE11上极其简单的示例重现这个问题

因此，我向示例中添加了OfficeJS并进行了一些测试。以下是我的发现：

在这个场景中，没有OfficeJ。我直接使用浏览器访问应用程序

• Chrome和IE11上的

  window.devicePixelRatio

  的初始值为

  1

• 在选项卡之间导航不会更改此值

在此，外接程序由主机（Word Online或Word 2016 for Windows）加载，主机在其自己的浏览器进程中运行

Word Online

• Word Online中Chrome上的

  window.devicePixelRatio

  的初始值为

  1

• Word Online中IE11上的

  window.devicePixelRatio

  的初始值也是

  1

• 在任一浏览器的选项卡之间导航不会更改此值

Word 2016 Windows版

• Word 2016中IE11上的

  window.devicePixelRatio

  的初始值为

  1

• 在选项卡之间导航会更改此值！具体来说，该值会减小，并且随着导航次数的增加，外接程序的内容似乎会缩小

---

所以，是的，你没有疯。：）也许OfficeJS团队的某个人可以帮助解决这个问题？

看起来他们已经意识到了这个问题。

<div class="root-navigation">
    <div class="navigation-links">
        <a routerLink="/tab1" [routerLinkActive]="['active']">
            Tab 1
        </a>
        <a routerLink="/tab2" [routerLinkActive]="['active']">
            Tab 2
        </a>
    </div>
</div>
<div class="root-viewport">
    <router-outlet></router-outlet>
</div>