Html iPad上基于百分比的CSS布局中断

我正试图根据客户的规格对网站进行编码。我现在所拥有的似乎在OSX Safari、Firefox和Chrome上运行得非常完美。未在PC上测试。在iPad上很快就会崩溃。而且在iPhone上完全瘫痪了

这就是我现在的处境：

每个元素的大小都与窗口的高度成比例，因为客户端习惯于刷新按窗口大小缩放的站点，并希望其图像显示得尽可能大。在iPad上，我以横向模式打开页面，然后立即单击菜单按钮，菜单弹出，所有内容都以适当的大小显示。但一旦我滚动、重新加载或尝试纵向查看，菜单按钮就会停止工作，或者没有显示正确大小的内容（如果它仍然可见）。我尝试过更改视口元设置，但组合似乎不起作用。我很想让它保持可伸缩性，但基于百分比的大小似乎在除1.0以外的任何级别上都不稳定

这里有什么明显的我遗漏的吗？有没有更好的办法？

---

有人知道为什么我的页面在移动设备上显示得如此不稳定吗？

所以看起来最大的问题是iOS还不支持视口相对单位。将它们全部更改回%单位，我的大多数问题都已解决。它的表现仍然不像桌面，但至少它不再“完全瘫痪”