字体大小 em 在某些设备上显示不同答案

【问题标题】：Font size em shows differently on certain devices字体大小 em 在某些设备上显示不同
【发布时间】：2012-08-20 06:08:51
【问题描述】：

我正在为主要为移动设备设计的网络创建一个聊天程序。我的问题是，为了尽可能适用于移动设备，我放弃了em 的像素字体大小，但是在我的带有 Firefox 的台式电脑上，li 文本显示非常小，并且在 iPad 上也是如此。在我的诺基亚 Lumia 800 windows phone 上，它显示得更大。

我的 CSS：

* { margin:0; padding:0; font-family:arial; }
body > div { width:auto; margin:10px; }
h1 { font-size:1.5em; }
h2 { font-size:4em; text-align:center; }
h2#signIn > a { color:#aaaaaa; }
h2#signIn > a:hover { color:#000000; }
h3 { text-align:left; font-weight:normal; margin:10px; }

ul { list-style:none; }
ul > li { font-size:0.8em; font-weight:normal; padding:5px; text-align:center; }

a { color:#000000; text-decoration:none; font-variant:small-caps; }
a:hover { color:#aaaaaa; }
div.fieldContainer { display:block; border:1px solid #000000; padding:5px; }
span.yell, span.wire { font-variant:small-caps; }
span.wire { color:#aaaaaa; }

input[type="text"], input[type="password"]
{
    width:100%; margin:0;
    font-size:2em; border:0;
}

input[type="button"]
{
    width:100%; padding:10px; font-size:2em;
    font-variant:small-caps; letter-spacing:2px;
    border:1px solid #000000; background-color:#dddddd;
}

#messages
{
    width:100%; height:200px;
    border:0; padding:0; margin:0;
    overflow:auto; font-size:0.9em;
}

span.msgTime { font-size:0.7em; }

.fromMe { color:#aaaaaa; }
.fromYou { color:#000000; }
.clear { clear:both; }

如您所见，列表元素使用 0.8em。我意识到存在浏览器不一致的情况，但这真的不可避免吗？

我还使用它来确保网页的比例正确显示：

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

更新 1

我认为值得一提的是，所有其他相对字体大小看起来都不错，似乎只是列表元素在移动浏览器中有所不同。

【问题讨论】：

您可以发布不同移动浏览器的屏幕截图吗？

标签： css mobile windows-mobile standards web-standards

【解决方案1】：

em 是相对于当前字体大小的度量。如果浏览器都有不同的默认基本字体大小，那么它们的外观会有所不同。尝试改用pt，它仍然适用于不同尺寸的屏幕，并且不像px那样固定。

http://www.w3schools.com/cssref/css_units.asp

【讨论】：

pt 也是固定大小。可能与 px 不同，但仍然是固定的。
@JukkaK.Korpela，它是基于英寸固定的，而不是基于像素的。优点是具有超高分辨率的屏幕仍会以相同的物理尺寸显示它们，即使需要更多像素才能达到该尺寸。
@SamuelNeff，但“英寸”在 CSS 中并不真正意味着“英寸”。它也可以锚定到 px 单位。解释于w3.org/TR/css3-values
感谢 Samuel，这正如我所愿。在使用 IE 的 windows phone 上，它看起来与我在桌面 firefox 浏览器上的显示成比例。
@JukkaK.Korpela，它的意思是，如果你使用“px”，那么一个设备上的“px”将与另一台设备上的物理单位不同，“in”单位。如果您使用“in”，那么在一个设备上的“in”将不是同一个像素，而在另一台设备上使用“px”。这正是我们想要的，“pt”，即根据设备的分辨率在每个设备上不同的“px”。

【解决方案2】：

每个浏览器都有自己的默认样式表，用于设置基本文本大小。 Ems 是根据默认文本大小更改大小的相对单位。试着给你的body 一个font-size:16px，作为一个例子，看看这是否不会使文本以相同的大小显示。

为了更清楚，这里有一个链接可以帮助解释为什么我建议在 body 元素上使用像素大小，并且仅该元素。 http://www.alistapart.com/articles/fluidgrids/

【讨论】：

感谢您的回答。我知道em 尺寸是相对的，这就是我采用它们的原因。我确实考虑过使用像素大小，但这对移动设备来说不是禁忌吗？
我建议您使用一次像素大小为所有ems 设置基线以关闭。每个浏览器的默认文本大小不同，因此ems 以不同的基线大小开始。在body 上设置显式大小可以让您的所有ems 从相同大小开始。在这种情况下 1em = 16px。

【解决方案3】：

在 css 文件第 1 行显示

* { margin:0; padding:0; font-family:arial; }

替换为

* { margin:0; padding:0; font-family:arial; font-size: 1em; }

它会起作用的！

【讨论】：

【解决方案4】：

如果您希望让每个浏览器使用其默认字体大小，大概适合设备，根本不要设置正文字体大小，也不要像现在一样使用meta 标签来防止缩放。

如果您认为“一刀切”是您的方式，那么以像素或磅为单位设置字体大小（不同的方法），而不是尝试使用 em 单位来实现。

【讨论】：

好的，但没有元标记，缩放关闭，需要用户捏缩放。使用 pt 效果很好。