“iPad上的Safari”和“iPhone上的Safari”之间的已知差异列表
我的网站在iPhone上看起来完美完美，但在iPad上看起来不太理想。我在查找iPad的webkit/safari渲染引擎和iPhone的webkit/safari渲染引擎之间的差异时遇到了很多麻烦。“iPad上的Safari”和“iPhone上的Safari”之间的已知差异列表
如果您不相信我，请在iPhone和iPad上同时使用http://www.finishline.com（请注意，如果您被扔到我们的移动网站，您将不得不点击页面底部的“标准网站”） 。主要区别在于缺少白色背景和顶部的主要选项卡式导航菜单（也就是右上方的小型小型车）。
iPhone（看起来是正确的）：
的iPad（看起来是错误的）：
什么是iPhone和iPad上的WebKit移动之间的呈现差异？
iPhone和iPad使用相同的渲染引擎WebKit。
这些平台之间的唯一明显的区别可能是：
- 如果以像素为单位指定网站上的字体大小，Retina显示屏的高DPI计数可能对文字缩放有一定的影响，但我可能是错的。始终以点为单位指定字体大小。
- 两种设备的屏幕尺寸不同。不是以像素为单位，而是根据物理尺寸。这是WebKit（或通常的iOS）试图通过调整字体大小来使其可读性更好的方式来弥补的，这些字体仍然适合页面。这可能会导致文档重新流动;导致换行。
对于这种情况，我不能真正建议任何事情比检查您的页面布局。使用W3C的工具对其进行验证，并在模拟器中进行正确测试，更重要的是在设备上进行测试。
从上面看起来，一些CSS黑客（例如，使其在IE上工作）可能会有这样的效果。或者是一场流浪的突破。
通常，您不应该担心这两个平台或平台之间的差异。使用干净的CSS和HTML，并在所有目标设备上进行测试，直到它看起来正确。尽量避免使用CSS/HTML黑客来使IE6工作。这是我经历问题的根源之一。
据我所知，这些设备之间没有什么“主要”区别，除了它们的屏幕尺寸（以及可能使用的WebKit/iOS版本 - 比如iOS 3.x和iOS 4.2）。
如果您有权访问Xcode，请尝试从不同版本的iOS查看该网站以查看是否存在问题。
无论哪种情况。修复你的HTML和CSS。问题可能有一个非常简单的原因。
视网膜显示器对渲染“px”尺寸没有任何影响 - 它们不会显示为尺寸的一半。鉴于桌面浏览器对“pt”使用不同的解释，通常情况下更好的做法是在“px”中指定所有内容，如果您希望看起来一致的跨浏览器。 – grahamparks 2010-11-21 15:20:26
当您的iPhone运行至少iOS 4.0时，您的iPad可能运行的是iOS 3.2（或4.2的测试版）。这比平台之间的差异更重要（其中不存在任何差异）。
我想你在吼叫错误的树，要求提供差异列表 - 你可以去http://trac.webkit.org/，并获得两个版本之间的补丁和错误修复的详尽列表，但它会更快地使用正常的CSS故障排除技巧（即主要是试验和错误）来弄清楚你的网站是如何导致它在iOS 3.2中搞砸的。
我看不出任何区别，除了影响底部链接的页面宽度和搜索栏下的广告不同之外。你如何添加一些截图来显示你的意思？ – 2010-11-19 17:24:42
注意：我正在使用iPad 4.2。也许你应该等待呢？您使用的是什么版本的iphone和ipad软件，并且您是否使用了视网膜显示器？ – 2010-11-19 17:25:32
两者的最新值/当前值。如果你有iOS 4，你会在iPad模拟器中得到相同的结果。 SDK ... – cmcculloh 2010-11-19 18:03:43