iphone上的文字显示大小不同

Posted 2023-02-23

【中文标题】iphone上的文字显示大小不同

【英文标题】：Text displays different size on iphone

【发布时间】：2011-12-06 19:56:53

【问题描述】：

在现有网站上，一个文本块在 iPhone 上显示过大，其中一部分是白色的。我已经在 android 和 iPad 上对其进行了测试，这将网站的其余部分推得太低，因此它与背景不一致。它在 iPad 上大小合适，但仍显示为白色。有问题的文字在此页面的右上角：http://www.ecodzign.com/waterfx2/index2.html 这是它在 iphone 上的样子：

我已禁用文本缩放，并尝试使用内联 css，但没有效果。只有电话号码显示为白色，所以我假设 iphone 正在创建某种链接来用电话拨打这些号码，但无论如何，这不能是白色背景的白色。

对于糟糕的表格设计和缺乏验证，我深表歉意，但我根本没有预算来正确重做整个网站。没有与文本或格式有关的验证错误，我怀疑这与正在发生的事情有关。

【问题讨论】：

我将尝试以像素而不是点来定义它，并添加 !important 并在我可以访问 iPhone 时报告

我发现了白色电话号码的问题。 iPhone 将任何检测到的电话号码转换为链接，使用站点具有的任何链接样式，在这种情况下，将它们设为白色。解决方案是更改网站该部分链接的默认颜色，或用标签分解电话号码，防止 iPhone 将其变成链接（即 702.555.1212

【参考方案1】：

这可能是您的 ios 设备上针对特定块的 pt 与 px 与 % 之间的区别。

检查你的代码后，我认为实际上是这样的：

font-family: Arial,Helvetica,sans-serif;
font-size: 8pt;
color: black;
font-weight: bold;

我敢打赌font-size: 8pt是罪魁祸首。

【讨论】：

你只需要与你的 CSS 保持一致，当你考虑跨浏览器/设备时，混合只会给你带来麻烦

【参考方案2】：

网站上似乎有很多内联 CSS。

你尝试了什么

<span style="color:black !important;">702.233.3200</span>

使用!important 关键字。

【参考方案3】：

这很可能与网站的 CSS 有关。您最好的选择是创建一个适合移动设备的网站或从包含这些数字的 html 中删除 <span style='color:black;'>。