我在尝试测试移动应用程序的布局时遇到了问题。我有两个元素放在一个容器中，它们彼此齐平。如果我滚动到其中一个页面(仅使用标准滚动，没有脚本)并更改方向，一切都很好，并且元素会适本地重新调整自身大小。但是当我恢复到之前的方向时，滚动位置似乎丢失了，并且滚动位置在两个元素之间。
这对我来说很难描述，因为我不确定发生了什么，所以我提供了 code I am using
您需要将其加载到设备上以查看发生了什么。以横向加载它，滚动直到所有绿色页面都可见，然后更改为纵向。然后回到风景。您将看到一半红色页面和一半绿色页面。
这是否与我设置视口(viewport)的方式或 webkit 浏览器的已知问题有关，因为这在 IOS 和 android(以及 chrome)上都会发生？
感谢任何帮助!
最佳答案
嗯，这实际上很合逻辑:
假设您使用的是 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" />
关于HTML - 移动布局 - 方向更改后的滚动位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9876352/