div 影响 iPhone 上的字体大小

Question

在我的页面 http://www.somersetsights.co.za/en/index.html 上，我有 4 个 div (div.service) 宽度的文本。前三个 div 的宽度为 256px。 4 号 div 的宽度为 900px（内联样式宽度：auto）。

当我在 iMac 和 iPad 上显示我的页面时，所有 4 个 div 都具有相同的文本大小和文本样式。在我的 iPhone 上，第 4 个 div 的文本与前三个 div 的文本大小和样式不同。

当我将 4 号 div 的宽度也定义为 256px 时，文本大小和样式与其他三个 div 中的相同。一旦宽度回到 900 像素，文本大小和样式就会发生变化。正如我所说，这只发生在我的 iPhone 上。不在我的 iPad 和 iMac 上。

当我增加 div 宽度时，如何避免文本大小和样式发生变化？

Answer 1

我无法使用 Chrome 开发工具模拟这种情况，但是当我尝试从 iPhone 模拟器访问您的网站时，我实际上可以看到问题。

但我猜这是因为 CSS；在 style.css 的第 18 行，您声明 font-size: 100%;，并且此声明将传播到您的 div.service 中的文本。

可能当您覆盖div 的宽度时，会相应地计算字体大小。行为上的差异可能是由于 Safari 中的错误或仅仅是因为 iOS 屏幕的不同属性（比例因子、方向、桌面的虚拟大小......）。

尝试将font-size: 100%; 替换为其他大小，例如12px 或em。那么字体大小就不再受div的宽度影响了。