“iPad上的Safari”和“iPhone上的Safari”之间的已知差异列表

Question

我的网站在iPhone上看起来完美但在iPad上看起来不是最佳。我在查找iPad的webkit / safari渲染引擎和iPhone的webkit / safari渲染引擎之间的差异方面遇到了很多麻烦。

如果你不相信我，请转到iPhone和iPad上的http://www.finishline.com（请注意，如果你被扔到我们的网页底部，你必须点击页面底部的“标准网站”移动网站）。主要区别在于缺少白色背景和顶部的主要标签导航菜单（右上方的小型迷你车也是如此）。

iPhone（看起来正确）：

iPad（看起来不对）：

iPhone和iPad上的移动网络套件之间的渲染差异是什么？

Answer 1

iPhone和iPad使用相同的渲染引擎WebKit。

这些平台之间唯一明显的区别可能是：

• 如果网站上的字体大小以像素为单位指定，则视网膜显示器的DPI计数较高可能会对文本缩放产生一些影响，但我可能错了。始终以磅为单位指定字体大小。
• 两种设备的屏幕尺寸不同。不是像素，而是物理尺寸。这是WebKit（或一般的iOS）试图通过调整字体大小来使其可读同时仍然适合页面来补偿的事情。这可能会导致文件重新流动;导致换行。

对于这种情况，除了检查您的页面布局之外，我无法提出任何其他建议。使用W3C的工具进行验证，并在模拟器中以及更重要的是在设备上正确测试。

从上面的内容来看，一些CSS hacks（例如，使其在IE上工作）可能会产生这样的效果。或者是一个迷路线。

通常，您不必担心这两个平台或平台之间的差异。使用干净的CSS和HTML并在所有目标设备上测试它，直到它看起来正常。尽量避免使用CSS / HTML黑客来使IE6工作。根据我的经验，这是问题的根本原因之一。

据我所知，这些设备之间没有“主要”差异，除了它们的屏幕尺寸（以及可能使用的WebKit / iOS版本 - 比如iOS 3.x与iOS 4.2）。

如果您有权访问Xcode，请尝试从不同版本的iOS查看该网站，看看是否存在问题。

无论哪种情况。修复您的HTML和CSS。问题可能有一个非常简单的原因。

Answer 2

当您的iPhone至少运行iOS 4.0时，您的iPad可能正在运行iOS 3.2（或测试版4.2）。这比平台之间的差异更重要（不应该是平台之间的差异）。

我认为你正在咆哮错误的树，要求列出差异 - 你可以转到http://trac.webkit.org/并获得两个版本之间的补丁和错误修复的详尽列表，但它会更快只使用普通的CSS故障排除技术（即主要是试验和错误）来弄清楚你的网站是如何导致它在iOS 3.2中搞乱的。