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 - 移動版面 - 定位更改後的滾動位置

回答

相關問題