iOS浏览器的差异

Question

在我的桌面浏览器和我的iPhone浏览器上可视化这个网站（http://bluecodestudio.com/kipos/updates/new/）时，有一个令我讨厌的区别，我无法修复。

在iOS'Safari上查看时，'p'标签的字体大小较小，与'h2'标签的字体大小相同。

原因是什么？提前谢谢。

Answer 1

Mobile Safari和其他一些移动浏览器通常会增加文字大小以使其更具可读性。

您可以使用以下规则在CSS中禁用此功能：

-webkit-text-size-adjust: 100%;

其他移动浏览器也有-moz和-ms前缀。

Answer 2

为了避免浏览器特定的默认样式表之间存在差异，请使用Eric reset.css或（我更喜欢的）normalize.css之类的内容。 继续阅读：https://stackoverflow.com/questions/116754/best-css-reset

Answer 3

这是因为他们使用不同的样式表，一个用于移动设备，一个用于桌面。在iPhone上，h2是23像素，p是22像素，你没有看到太大的区别。在桌面上，h2是20像素，p是14像素，这是一个很大的差异，很容易看到。

您可以通过一个非常酷但鲜为人知的Mobile Safari功能Web Inspector轻松发现此类事件，它允许您通过将其连接到台式计算机来查看iPhone上显示的Web页面的CSS和其他详细信息并使用桌面Safari阅读这些细节。哇。