打开链接时 iOS Chrome 的视口高度不正确来自 iMessage、Messenger、WhatsApp 等

编程问答 2022-05-26

问题描述

当从外部（来自 iMessage、Twitter、Messenger 等）单击要在 Chrome 中打开的链接时，iOS Chrome 似乎无法正确计算 html 视口。

html 很简单：

<!DOCTYPE html>
<html lang="en" style="background: linear-gradient(#e66465,#9198e5)">
  <head>
    <Meta charset="UTF-8" />
    <Meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

重现步骤：

  1. 复制此链接：https://alwyntan.github.io/test-page/，不要点击它，因为它会正常工作。
  2. 将链接发送给您自己（通过 iMessage、Messenger 或您使用的任何消息服务）。
  3. 在 Chrome 上打开您刚刚发送给自己的链接。

当开发旨在与他人共享并且在页面底部有一个 CTA 按钮绝对定位的页面时，这个问题尤其成问题（该按钮不会显示，因为用户必须向下滚动才能看到它）。想象一个事件页面，“加入事件”按钮绝对位于页面底部，用户无法立即看到。

您会看到页面在不应该滚动时可以滚动。通过点击地址栏并按回车键再试一次，页面将恢复到其预期行为（html 正确占用可用视口）。为什么会发生这种情况，有人知道如何解决吗？

非常感谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

chrome-ioshtmliosioswebweb