(注意:下面的更新 1-5)
我有一个基于 Twitter-Bootstrap 的响应式网页，页面的左上角有一个矩形区域，该区域完全死了，但仅限于 Mobile Safari(我还没有在 Android 上测试过)。
死亡，定义:
- 死区的各种按钮无法点击
- 在死区中向上/向下滑动不会向上/向下滚动页面。
我添加了以下代码:
$('*').click(function(){
console.log($(this));
});
...当我激活 mobile safari JS 控制台时，我注意到死区已向上移动等于控制台条的像素高度! 。也就是说，死亡区域缩小了。此外，控制台还记录了所有点击除了在死区中执行的点击。
<小时/>更新#1:
根据评论中的建议，我...
1) 仔细检查固定定位元素:
$('*').click(function() {
console.log('checking for fixed elements...');
$('*').each(function() {
if ($(this).css('position') == 'fixed') {
console.log($(this));
}
})
});
...事实证明，我的 Bootstrap 模式 对话框在移动设备中的位置都是固定的。我删除了所有对话框，问题仍然存在。
2) 添加了以下 CSS 代码....
* { outline: 1px solid red; }
这是 iPhone 屏幕截图。 (我后来在 Photoshop 中添加了蓝色框以近似死区)...
更新＃2:好吧，这太荒谬了。我开始从代码中删除一些内容。这就是我最终得到的结果，但问题仍然存在!...
<html>
<head>
</head>
<body>
</body>
</html>
更新 #3:这可能是 Safari 错误，与我的网页无关。 (请参阅下面的更新#2)。我强行关闭了 safari，重新打开后问题就消失了。
<小时/>更新＃4:问题再次出现:(也许这毕竟是我的网页而不是 Safari 的侥幸。但是，它似乎是随机发生的......强制关闭浏览器会修复它一段时间，直到它再次回来。
<小时/>更新＃5:一旦出现死区，导航到另一个网页后，死区仍然存在。
<小时/>最佳答案
这个问题只有大约一百万种可能性。我首先将您的设备插入计算机并打开 Safari。确保您的首选项中打开了冲印模式。从开发菜单中选择您的设备，然后检查元素。您将会发现令人惊奇的东西。首先向每个元素添加“display:none”，直到找到问题所在。
关于javascript - 死亡矩形——Mobile Safari，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12481515/