HTML - 移动布局 - 方向更改后的滚动位置

Question

我在尝试测试移动应用程序的布局时遇到了问题。我有两个元素放在一个容器中，它们彼此齐平。如果我滚动到其中一个页面(仅使用标准滚动，没有脚本)并更改方向，一切都很好，并且元素会适本地重新调整自身大小。但是当我恢复到之前的方向时，滚动位置似乎丢失了，并且滚动位置在两个元素之间。

这对我来说很难描述，因为我不确定发生了什么，所以我提供了 code I am using

您需要将其加载到设备上以查看发生了什么。以横向加载它，滚动直到所有绿色页面都可见，然后更改为纵向。然后回到风景。您将看到一半红色页面和一半绿色页面。

这是否与我设置视口(viewport)的方式或 webkit 浏览器的已知问题有关，因为这在 IOS 和 android(以及 chrome)上都会发生？

感谢任何帮助!

Answer 1

嗯，这实际上很合逻辑:

假设您使用的是 iPhone。您的屏幕纵向尺寸为 320x480，横向尺寸为 480x320。

在纵向模式下，全局 div 是 200%，所以是 640px。绿色部分在 320px 处。在横向上，你的全局 div 是 960px 宽。绿色部分在 480px 处。

如果你去纵向的绿色部分，你滚动到 320px。当你改变方向时，你仍然在 320px，但绿色部分现在在 480px:卡在中间。

可能的解决方案:javascript，监听 onorientationchange 事件并设置正确的偏移量。

其他(但不好的)解决方案:固定宽度的视口(viewport)，例如:

<meta name="viewport" content="width=400px,initial-scale=1.0,maximum-scale=1.0" />