React Web App 在 iPhone 上水平移动

Posted 2023-02-21

【中文标题】React Web App 在 iPhone 上水平移动

【英文标题】：React Web App moves horizontally on iPhone

【发布时间】：2020-06-08 23:33:16

【问题描述】：

几个月前，我为我的客户解决了这个问题。现在我们已经拆分了要由 WebPAck 处理的 css 以获得 PWA 状态，我发现它又回来了。

问题在于该测试站点的登录页面 (https://foxtail-stage.netlify.com/)。整个网站左右拖动！它只在 iPhone 上，所以我知道这是另一个 Safari 问题。

我能够通过将 x-overflow:hidden 添加到 .html 和 .body 类来修复它。

但正如我所说...现在它回来了:(

我怎样才能一劳永逸地解决这个问题？

【问题讨论】：

只是喜欢“右键单击被禁止”的警报

@Agney 我认为逻辑是他们不希望人们认为这导致了他们的计算机错误

【参考方案1】：

您似乎遇到了两个问题：

1) 关于overflow-x 不起作用，您在body 标记上具有覆盖overflow-x: unset; 的样式，从而使您的overflow-x: hidden; 不存在。

2) 你的 UI 中的某些东西从它的容器中溢出，iPhone X 上的宽度是 414px，但合成宽度是 415px，所以你应该调试你的整个 UI 并确保没有任何东西溢出。

希望这会有所帮助！

【讨论】：

是的，就是这样。有人把它偷偷带进去了。