Question

我正在使用Angular 5处理Office Word加载项。我有一个奇怪的问题，点击任何路由链接每次点击都会将视口缩放级别缩小一小部分直到一切都非常小。我已将位置策略设置为哈希。

我已删除所有CSS并仍然遇到此问题。
尝试使用和不使用视口元标记和@ -ms-viewport css属性进行各种设置。
尝试将X-UA兼容元标记设置为各种版本的IE。

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

更新：

我尝试使用以下加载项，并通过单击路径链接遇到相同的问题。 https://github.com/OfficeDev/Word-Add-in-Angular2-StyleChecker

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Office Add In</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <base href="/">
  <script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js" type="text/javascript"></script>
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

主要模板

<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>

Answer 1

注意：此答案不会包含问题的解决方案，因为发布评论的时间太长。

TL; DR：看起来Word 2016 for Windows中的一个错误会影响window.devicePixelRatio使用Angular的路由器的OfficeJS加载项。使用IE11或Chrome在Word Online上不会发生此错误。

版本号：

Windows 10：
版本1709（OS Build 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的值，我可以看到它的值随着每个路由器导航而稳步下降。奇怪，鉴于it's supposed to be read-only！

所以我花了一些时间creating a simple repro作为opening a ticket on their GitHub repo的准备工作。

但是，我无法通过Chrome和IE11上非常简单的示例重现问题。

因此，我将OfficeJS添加到示例in a separate branch并进行了一些测试。以下是我的发现：

Simple Angular App

在这种情况下，没有OfficeJS。我直接使用浏览器访问该应用程序。

Chrome和IE11上window.devicePixelRatio的初始值为1。
在标签之间导航不会更改此值。

OfficeJS Add-in

此处，加载项由主机（Word Online或Word 2016 for Windows）加载，该主机在其自己的浏览器进程中运行。 Side-loading manifest info here

Word Online

Word Online中Chrome上window.devicePixelRatio的初始值为1。
Word Online中IE11上window.devicePixelRatio的初始值也是1。
在任一浏览器中选项卡 不会更改此值。

Word 2016 for Windows

Word 2016中IE11上window.devicePixelRatio的初始值为1。

在标签之间导航更改此值！具体而言，该值会降低，并且在导航足够的情况下，加载项的内容似乎会缩小。

所以是的，你并不疯狂。 :)也许OfficeJS团队的某个人可以帮忙解决这个问题？

Office加载项 - 视口大小问题

1 个答案:

Simple Angular App

OfficeJS Add-in