HTML - モバイルレイアウト - 方向変更後のスクロール位置

Question

モバイルアプリケーションのレイアウトをテストしようとしているときに問題が発生しました。私は2つの要素がコンテナに座っていて、互いにぴったりです。私がページのいずれかにスクロールして（標準のスクロールだけを使用し、スクリプトは使用しない）、方向を変更すると、すべてがうまくなり、要素のサイズが適切に変更されます。しかし、元の向きに戻すと、スクロール位置が失われたように見え、スクロール位置は両方の要素の中間になります。私は、私はあなたが何が起こっているか確認するために、デバイス上でこれをロードする必要がありcode I am using

提供している何が起こっているのかわからないので、私が説明するため

は、それは非常に難しいのです。ランドスケープでロードし、緑色のページがすべて表示されるまでスクロールしてから、ポートレートに変更します。その後、風景に戻ります。赤いページの半分と緑のページの半分が表示されます。

これは、ビューポートやWebkitブラウザでの既知の問題の設定方法と関係があります。これは、IOSとAndroid（Chrome）の両方で発生するためですか？

Answer 1

実際にはかなり論理的です。

iPhoneを使用しているとします。画面は縦320x480、横480x320です。

肖像画では、グローバルdivは200％ですので、640pxです。緑色の部分は320pxです。 ランドスケープでは、グローバル部門の幅は960ピクセルです。緑の部分は480pxです。

緑色の部分を肖像画にすると、320pxにスクロールします。向きを変えてもまだ320pxですが、緑色の部分は480pxになります。中央にはまります。

可能な解決策：javascript、onorientationchangeイベントをリッスンし、正しいオフセットを設定する。

その他（悪い）

ソリューション：固定幅のビューポート、exempleあたり：

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