我在尝试测试移动应用程序的布局时遇到了问题。我有两个元素坐在一个容器中，彼此齐平。如果我滚动到其中一个页面（仅使用标准滚动，没有脚本）并更改方向一切都很好，元素正确地重新调整大小。但是当我恢复到之前的方向时，滚动位置似乎丢失了，滚动位置在两个元素之间。
我很难描述，因为我不确定发生了什么，所以我提供了code I am using
您需要在设备上加载它以查看正在发生的事情。将其加载到横向中，滚动直到所有绿色页面都可见，然后更改为纵向。然后回到景观。您将看到半个红色页面和半个绿色页面。
这与我设置我的视口的方式或webkit浏览器的已知问题有关，因为这发生在IOS和android（也是chrome）上？
任何帮助表示赞赏！
答案 0 :(得分：1)
嗯，实际上它很合乎逻辑：
假设您使用的是iPhone。你的画面是320x480的纵向，480x320的横向画面。
在纵向中，您的全局div为200％，因此为640px。绿色部分为320px。 在横向，您的全局div是960px宽。绿色部分为480px。
如果以纵向转到绿色部分，则滚动到320px。当你改变方向时，你仍然是320px，但绿色部分现在是480px：卡在中间。
可能的解决方案：javascript，监听onorientationchange事件并设置正确的偏移量。
其他（但不好）解决方案：固定宽度视口，例如：
<meta name="viewport" content="width=400px,initial-scale=1.0,maximum-scale=1.0" />