Ipad 浏览器中响应式网页元素的位置出错答案

【问题标题】：Responsive web page elements' positions went wrong in Ipad browserIpad 浏览器中响应式网页元素的位置出错
【发布时间】：2022-01-19 02:30:30
【问题描述】：

问题：我使用 Reactjs 开发了一个单页网站并将其部署到 Heroku（它是对现有网站的翻版。我想将它作为我的入门级 Web 开发工作组合的一部分）。在 Chrome Toggle 设备工具栏上进行检查时，响应式网站在受刺激的移动设备和 ipad 上运行良好。在我的 iPhone7 Plus 中打开该网站时，它也运行良好。但是当在真正的 iPad 中打开时，几个部分元素的位置并没有像预期的那样 - 它们重叠。

受影响的元素是具有 CSS 样式溢出的容器元素的子元素：auto。显示：弹性，弹性方向：列。我想要达到的效果是所有主要内容（导航菜单、页脚和侧边栏除外）都包含在一个可滚动的容器中。

Screenshot of the website in ipad browser 我花了一些时间尝试在互联网上搜索答案，但没有得到任何运气。

问题：如何让响应式网站在 iPad 设备上正常运行？

【问题讨论】：

标签： position scrollbar overflow responsive scrollable

【解决方案1】：

在 Stackoverflow 上多次尝试和搜索后，我终于找到了解决方案。

我遇到了一个 stackoverflow 问题，并注意到我的问题很相似。在我的项目中，容器元素的样式包括溢出：自动、显示：flex、flex-direction：列。由于某种原因（我仍然不明白这背后的理论），当在 iPad 浏览器中打开 Web 应用程序时，容器的子元素（弹性项目）会自动收缩。这就是子元素相互重叠的原因。为了解决这个问题，我为每个子元素设置了 CSS 样式 flex-shrink: 0。现在该应用程序在 iPad 上可以正常运行了。

另一个stackoverflow问题的链接如下： flex items overlapping in Safari (iPad)

【讨论】：