非常に頑固な iPad 固有のバグが発生しており、これまで解決策を見つけることができませんでした。私はクライアントのウェブサイトをレスポンシブにする過程にあります。iPad では、サイトの幅は縦方向で 768 ピクセル、横方向で 1130 ピクセルです。向きの変更時に JavaScript を使用してビューポート メタ タグを更新しています。これらは、JS によって生成されるビューポート メタ タグです。
ポートレート:<meta name="viewport" content="width=768,minimum-scale=1, maximum-scale=1, initial-scale=1">
風景：<meta name="viewport" content="width=1130,minimum-scale=0.9061946902654867, maximum-scale=0.9061946902654867, initial-scale=0.9061946902654867">
ユーザー制御のズームを無効にすると、眉が上がることはわかっています。ただし、多くのテストの結果、方向の変更に対して一貫して機能する唯一の構成でした。
次のシナリオを除いて、方向の変更の間にすべてが正常に機能します。
1) タップして、いずれかの向きでテキスト フィールドを編集します
2) 仮想キーボードを閉じる
3) iPadの向きを変える
横向きでは、レイアウトはビューポートを超えて拡張されます (ズームイン)。縦向きでは、レイアウトはビューポートよりも狭くなります (ズームアウト)。ただし、任意のテキスト フィールドをもう一度クリックすると、適切な縮尺が復元されます。
この問題の初歩的なデモをhttp://735.es/ipad/にセットアップしました。iPad (シミュレーターではない)で上記の手順を実行すると、問題はすぐに特定できるはずです。
フィードバックをお寄せいただきありがとうございます。
編集
これは、方向の変更の間にビューポートのメタ タグで異なるスケールを使用しているという事実に間違いなく関連しています。ランドスケープ ビューポートの幅を 1130 ではなく 1024 (スケール 1) に設定すると、この問題はなくなります。また、私はすでに scottjehl/iOS-Orientationchange-Fix.js スクリプトを使用しようとしましたが、成功しませんでした。