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

Question

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

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

iPhone(看起来正确):

iPad(看起来不对):

iPhone和iPad上的移动webkit之间的渲染差异是什么？

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.问题可能有一个非常简单的原因.