HTML - 移动版面 - 定位更改后的滚动位置

我在尝试测试移动应用程序的布局时遇到了问题。我有两个元件坐在一个容器中，它们相互冲突。如果我滚动到其中一个页面（只使用标准滚动，不使用脚本）并更改方向，一切正常，并且元素可以正确重新调整大小。但是，当我恢复到以前的方向时，滚动位置似乎丢失了，并且两个元素之间的滚动位置都被丢失了。HTML - 移动版面 - 定位更改后的滚动位置

这是我很难形容，因为我不知道是怎么回事，所以我所提供的code I am using

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

这是关于如何设置我的视口或Webkit浏览器的已知问题，因为这发生在IOS和Android（也是铬）？

任何帮助表示赞赏！

来源

2012-03-26 backdesk

我没有答案，但都遇到类似的问题。从我所知道的情况来看，它与浏览器标题栏/搜索在定位更改期间没有被设备考虑在一起。我发现绝对定位的div的问题......当方向发生变化时，它会偏离位置。 – 2012-03-26 17:12:00

那么，它实际上是相当逻辑：

假设你在iPhone上。您的屏幕纵向为320x480，横向为480x320。

肖像中，你的全局div是200％，所以640px。绿色部分是320px。在风景中，您的全局div为960像素宽。绿色的部分是在480px。

如果您转到纵向的绿色部分，请滚动到320像素。当你改变方向时，你仍然在320px，但绿色部分现在在480px：卡在中间。

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

其他（但坏）解决方案：固定宽度的视口，每为例：

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

来源

2012-03-26 18:11:53 mddw

HTML - 移动版面 - 定位更改后的滚动位置

回答

相关问题