css - 为什么部分和渐变无法在移动设备 (iOS) 上正确显示？

Question

我正在尝试创建三个部分:

1. 一个<header>具有固定的渐变背景，
2. 一个<section>背景扎实，
3. 一个<section>具有不同的渐变背景。

它们都共享属性 min-height: 100vh和 max-width: 100vw , 所以每一个都在滚动时占据整个屏幕。

CodePen here.

我希望它在移动设备上的表现与在桌面设备上的表现一样:滚动时占据整个屏幕的三个部分，其中两个具有固定的背景渐变。相反，在移动设备上我只能看到无法滚动的标题，并且渐变超出了视口(viewport)的范围。

感谢任何帮助。

Answer 1

这可能是支持问题:

HTML5 Semantic Support

Viewport Units Support

尝试使用简单的 div block 或在 css 中使用 % 单元。