OS 5 の iPhone 4 だけで奇妙な問題が発生しているようです。この問題は 4S や iPhone 5 では発生しません。
ページの下部に、スプライトの背景を持つナビゲーション バーを設定しています。次に、そのナビゲーション バーの上に 3 つの個別の div を配置して、クリック アクションをバインドし、何らかの要求を実行できるようにします。
ビューポートを次のように設定しています。
<meta name='viewport' id='viewport' content='width=device-width,user-scalable=no' />
また、ページが読み込まれると、すべてがズームインされたように読み込まれますが、すべてのコンテンツが読み込まれると、適切にズームアウトされ、すべてが 1 ページに収まります。
HTML:
<div id='footerNav' style='position: fixed; bottom: 0;'>
<div id='cell1'></div>
<div id='cell2'><div>
<div id='cell3'></div>
</div>
Javascript:
jQuery('#footerNav').delegate('#cell1', 'click', function() { alert('click'); });
jQuery('#footerNav').delegate('#cell2', ....);
jQuery('#footerNav').delegate('#cell3', ....);
これで、背景画像と 3 つの div を含むフッターがレンダリングされ、すべてがページの下部に表示されます (CSS に border: 1px solid red を配置して、本来の場所に表示されるようにしました)。奇妙な問題は、クリック可能な領域がフッターの上にあることです。
さらに奇妙なのは、iPhone の横向きを回転させてから元に戻すと、タッチ可能な領域が想定どおりに機能することです。
コンテンツに合わせてズームアウトするときにSafariがビューポートを処理する方法と関係があると感じていますが、それを実際に証明することはできません. この問題に関する洞察を期待しています。
前もって感謝します！