如何对 ipad 上的网站进行故障排除？答案

【问题标题】：How to troubleshoot websites on the ipad?如何对 ipad 上的网站进行故障排除？
【发布时间】：2014-01-08 23:30:29
【问题描述】：

所以我有一个尚未完成的网站 (eklinik)，并且它在 iPad 上中断（实际上是一般的 iOS）...诸如页脚之类的东西不会保持固定，右侧有额外的填充，应该是 100% 宽度/高度的 div 不是，等等......

现在，我不是要求其他人清理我的烂摊子（尽管这会是一件多么美好的事情），但我要问的是如何开始在 iPad 上对网站进行故障排除...？对于桌面浏览器，我总是可以调出开发工具，看看哪里出了问题……

我没有基于 mac 的系统，但我有一台 iPad……iPad 中的开发控制台（主要是）只查找 JS 错误并且不显示任何内容……

任何建议都会有所帮助...谢谢...

PS。该网站只能在最新的浏览器上运行：

Chrome 12+
火狐4+
歌剧 - 11+
IE 9+（勉强）
Safari 5+

如果您确实觉得很慷慨，并且确实想指出我可能犯的错误（可选）以及可能的解决方案（可选），请随时给我写信 - abhishek@live.com.my。 .. :-)

【问题讨论】：

它在非桌面版 Safari 中运行良好...一切正常...因此是 iPad 特定问题...

标签： html css ipad

【解决方案1】：

这个问题很老了，但已经找到了一个很好的解决方案：

Adobe Shadow

【讨论】：

这正是我所需要的。我可以在我的电脑上编辑页面并在 iPad 上获得实时反馈。
现在称为 Adobe Edge Inspect。优秀的解决方案。谢谢！

【解决方案2】：

我最近有不少客户希望他们的网站“与移动设备兼容”，而在 iPad 上检查代码/css 的最佳解决方案是 Firebug Lite： http://getfirebug.com/firebuglite

我相信您可以将 javascript 上传并包含在您的网站中，然后使用 html 标记中的简单属性自动将其打开（有关更多信息，请参阅他们的文档）。

您也可以在您的 iPad 书签中使用此方法安装小书签： http://osxdaily.com/2011/12/02/run-firebug-on-ipad-or-iphone/

我使用小书签方法使用它，它可以工作。不幸的是，它有点难以导航，因为它不能很好地处理触摸控件（它很难区分“悬停”和“点击”），但总比没有好。

关于您的实际问题，这听起来类似于我最近在我的一个网站上遇到的问题。您是否设置了视口标签？如果您的网站通常是 960px 宽，并且您有一个使用 width:100% 的 div，那么它在 iPad 上看起来会出错，因为从技术上讲，iPad 上的窗口只有 600px 宽。所以浏览器认为 width:100% 是 600px 而不是 960px 或更大。如果您将视口设置为 960 像素，那么 iPad Safari 会说，“哦，我的浏览器窗口应该是 960 像素（而不是 600 像素）”并相应地调整大小。

希望有帮助！

【讨论】：

更新：对于 Mac 爱好者，您可以使用 Coda（Mac 应用程序）和 Diet Coda（iPad 应用程序），当您在您的台式机/笔记本电脑。

【解决方案3】：

我使用weinre 在移动设备上进行测试，而不仅仅是在 iPad 上进行测试，效果非常好。

【讨论】：

【解决方案4】：

如果您在您的 PC 中也使用 chrome 和 safari 仔细测试，直到获得一致的结果，我预计 iPad 或 Android 平板电脑的渲染结果“几乎”相同...

关于 javascript 错误，您当然应该避免并修复它们，您使用的是 jQuery 还是任何其他本质上跨浏览器的 js 框架？如果没有，你应该！ :)

【讨论】：

浏览器中的开发工具告诉我没有 JS 错误，并且一切正常...在桌面上...但是当我切换 iPad 时，有些东西坏了...几乎就像移动 safari 中的用户代理样式与桌面版本中的不同...
这可能是，我一直在读一些东西，说 iPad 浏览器就像 IE6，根本不标准。我们将很快开始一个新的大型网络项目，我计划从一开始就在 iPad 和 Android 平板电脑上测试所有内容。
看，我也一直在 iPad 上测试该网站...但是当出现问题时，没有简单的方法来识别它是什么...没有调试环境（我是知道）它很容易告诉你，“哦，看起来……第 312 行有一个错误”……