“iPad 上的 Safari”之间的已知差异列表和“iPhone 上的 Safari”
我的网站在 iPhone 上看起来完美，但在 iPad 上看起来不太理想。我在查找有关 iPad 的 webkit/safari 渲染引擎和 iPhone 的 webkit/safari 渲染引擎之间差异的信息时遇到了很多麻烦。
如果您不相信我，请在 iPhone 和 PC 上访问 http://www.finishline.com iPad（请注意，如果您被转到我们的移动网站，则必须单击页面底部的“标准网站”）。主要区别是缺少白色背景和顶部的主选项卡式导航菜单（右上角的小迷你推车也很远）。
iPhone（看起来正确）： 
iPad（看起来不对）： 
iPhone 和 iPad 上的移动 webkit 之间的渲染差异是什么？
My website looks perfect on the iPhone but looks sub-optimal on the iPad. I'm having a lot of trouble finding information on the differences between iPad's webkit/safari rendering engine and iPhones' webkit/safari rendering engine.
If you don't believe me, go to http://www.finishline.com on both the iPhone and the iPad (note that you will have to click "standard site" at the bottom of the page if you get thrown over to our Mobile site). The main differences being a missing white background and the main tabbed navigation menu at the top (also the little mini-cart up at the top right is way off).
iPhone (looks correct):
iPad (looks wrong):
What are the rendering differences between mobile webkit on iPhone and iPad?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
iPhone 和 iPad 使用相同的渲染引擎 WebKit。
这些平台之间唯一明显的区别可能是：
对于这种情况，除了检查页面布局之外，我真的无法提出任何其他建议。使用 W3C 的工具对其进行验证，并在模拟器中以及更重要的是在设备上对其进行正确测试。
从上面看起来，一些 CSS hack（例如使其在 IE 上工作）可能会产生这样的效果。或者是杂线断线。
一般来说，您不必担心这两个平台或一般平台之间的差异。使用干净的 CSS 和 HTML 并在所有目标设备上进行测试，直到看起来正常为止。尽量避免使用 CSS/HTML hacks 来使 IE6 正常工作。根据我的经验，这是问题的根本原因之一。
据我所知，这些设备之间没有“重大”差异，除了屏幕尺寸（以及可能使用的 WebKit/iOS 版本 - 比如说 iOS 3.x 与 iOS 4.2）。
如果您可以访问 Xcode，请尝试使用不同版本的 iOS 查看该网站，看看是否存在问题。
无论哪种情况。修复您的 HTML 和 CSS。该问题的原因可能非常简单。
iPhone and iPad use the same rendering engine, WebKit.
The only obvious differences between those platforms might be:
For this case I can't really suggest anything else than checking your page layout. Validating it using W3C's tools and testing it properly in both Simulator and more importantly, on the devices.
From what it looks above, some CSS hacks (to make it work on IE for instance) might have an effect like this. Or a stray line break.
Generally, you shouldn't worry about differences between these two platforms, or platforms in general. Use clean CSS and HTML and test it on all target devices until it looks properly. Try to avoid using CSS/HTML hacks to make IE6 work. This is one of the root causes of problems from my experience.
As far as I know, there are no "major" differences between these devices, except for their screen size (and possibly the used WebKit/iOS version -- let's say iOS 3.x vs. iOS 4.2).
If you have access to Xcode, try to look at the site from different versions of iOS to see if that's the problem.
In either case. Fix your HTML and CSS. The problem might have a very simple cause.
您的 iPad 可能运行 iOS 3.2（或 4.2 测试版），而您的 iPhone 至少运行 iOS 4.0。这比平台之间的差异更重要（平台之间不应该有任何差异）。
我认为您在要求差异列表时找错了树 - 您可以访问 http://trac.webkit .org/ 并获得两个版本之间的补丁和错误修复的详尽列表，但是使用普通的 CSS 故障排除技术（即主要是尝试和错误）来找出您的网站的情况会更快导致它在 iOS 3.2 中陷入混乱。
Your iPad is probably running iOS 3.2 (or a beta of 4.2) while your iPhone is running at least iOS 4.0. That's more important than the differences between the platforms (of which there aren't supposed to be any).
I think you're barking up the wrong tree asking for a list of differences - you can go to http://trac.webkit.org/ and get an exhaustive list of patches and bug fixes between the two versions, but it's going to be quicker to just use normal CSS troubleshooting techniques (i.e. mostly trial and error) to figure out what about your site is causing it to mess up in iOS 3.2.