元素在平板电脑浏览器上显示不正确答案

【问题标题】：elements display incorrectly on tablet browsers元素在平板电脑浏览器上显示不正确
【发布时间】：2014-09-10 09:46:35
【问题描述】：

我目前正在从事我的前两个项目之一，您可以看出我仍处于 youtube-tutorials-&-SO-powered 学习之旅的开始：

请不要对我的代码太苛刻 :D 我在一个小编辑器中从头开始手写所有内容。

简而言之，在台式机上一切似乎都正常（我测试了 FF 和 Chrome），但在 iPad 和其他平板电脑上我遇到了严重的错误 - 我在两个问题上遇到了重大问题：

Google 地图 iframe 始终可见（与其他部分）在平板电脑上，即使没有点击相应的部分在菜单上，我不知道为什么！看来，可见性：隐藏在固定位置的元素上不会被解释正确吗？
:focus 在图片库“潜行高峰”上工作，但是在服务部分，无法访问 4 个子内容区域。
（不相关？）当页面在我的 iPad (mini) 上加载时，#logo_box div 出现在页面加载时，但变成半透明的非常地图 iframe 出现的瞬间。

EFFORT1：我完全删除了包含 Google 地图 iframe 的“内容”容器，突然，其他内容部分上的 :hover 也停止了工作。这可能表明某些东西以一种不正确的方式“链接”...

EFFORT2：我认为是罪魁祸首，但我无法确定它。我试过this suggested solution，但它适用于IOS4（2011），正如Rob Fletcher去年2月评论的那样，它不适用于IOS7。

EFFORT3：我觉得 .content div 的 {visibility:hidden/visible;} 在 android 移动浏览器中造成了问题：input:checked hides 而不是显示特定部分而所有其他部分显示.

顺便说一句，我该如何解决平板电脑的故障？我在 ipad 和 android 浏览器上没有任何开发工具。

非常感谢您的帮助！

【问题讨论】：

【解决方案1】：

在 iPad 上，您可以进入 Settings App，然后进入 Safari -> Advanced -> Web Inspector。

然后通过 USB 将其插入您的 Mac 并在 Mac 上打开 Desktop Safari。如果您尚未启用开发菜单，请转到 Safari -> 首选项 -> 高级 -> 显示开发菜单。

然后，当您在 iPad 上的 Safari 中打开网页时，您可以通过 Mac 的 Safari 上的“开发”菜单连接到该网页并使用 Web 检查器。

如果您在 Android 上使用 Chrome，则可以使用远程调试 https://developer.chrome.com/devtools/docs/remote-debugging

Weinre 在更多平台（包括 Android 原生浏览器）上提供类似功能，但设置起来有点复杂。

【讨论】：