0

我有一个简单的页面，它使用 A-Frame 和 AR.js 在找到标记时加载视频以及一些简单的 UI 来引导用户。这在大多数浏览器中都很好，但在三星互联网（Adnroid 浏览器）上不起作用。

问题是 UI 放置不正确，并且不像其他浏览器那样大小合适。远程调试后，我注意到在三星浏览器上document.documentElement.clientWidth / Height和window.innerWidth / Height差异很大，而在其他浏览器上是相同的值。在我的 OnePlus 6T 上，我得到：

铬合金：

  • window.innerWidth：412
  • window.innerHeight：757
  • document.documentElement.clientWidth：412
  • document.documentElement.clientHeight：757

三星：

  • window.innerWidth：1648
  • window.innerHeight：2869
  • document.documentElement.clientWidth：412
  • document.documentElement.clientHeight：717

如您所见，难怪我的 UI 图像看起来很小，因为三星似乎认为窗口实际上是巨大的，但三星似乎只在加载 A-Frame 场景后“扩展”这些尺寸，因为在加载之前我有一些带有加载动画的不同 UI，它可以正确放置元素并以正确的尺寸显示它们，就像在其他浏览器中一样。

例如，如果我window.innerHeight在 A-Frame 仍在加载时进行查询，我得到了正确的717结果，但一旦加载，我再次查询它，我得到了2869。

A-Frame 或 AR.js 似乎都会对它做一些事情，<body>因为一旦加载，主体看起来像这样：

<body style="height: 2869px; width: 3825.33px; margin-left: -1088.5px; margin-top: 0px;">

如您所见，主体上的新强制尺寸是三星认为的视口大小，在 Chrome 中也会发生这种情况，尽管这些值与视口大小相当：

<body style="height: 757px; width: 1009.33px; margin-left: -298.5px; margin-top: 0px;">

知道是什么原因造成的，我该如何解决？

4

0 回答 0