我似乎遇到了一个奇怪的问题，只有 OS 5 上的 iPhone 4。这个问题不会发生在 4S 或 iPhone 5 上。
我在页面底部设置了一个导航栏，其背景为精灵。然后，我将 3 个单独的 div 放在该导航栏的顶部，以便我可以绑定单击操作并执行某种请求。
我正在像这样设置视口：
<meta name='viewport' id='viewport' content='width=device-width,user-scalable=no' />
可能值得注意的是，当页面加载时，它会像所有内容都被放大一样加载，但是一旦加载了所有内容，它就会正确缩小并且所有内容都适合一页。
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 中放置了一个边框：1px 纯红色以确保它显示在预期的位置）。奇怪的问题是可点击区域现在位于页脚上方。
更奇怪的是，如果你旋转 iPhone 的风景然后再回来，可触摸区域会按预期工作。
我觉得它与 Safari 在缩小以适应内容时如何处理视口有关，但我无法真正证明这一点。我希望对这个问题有任何见解。
提前致谢！