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

我正在为网络创建主要为移动设备设计的聊天程序。我的问题是，在尽量适合移动设备的情况下，我放弃了em的像素字体大小，但是在我的台式电脑上使用Firefox时，li文本显示为非常小，并且也在iPad上显示。在我的诺基亚Lumia 800 Windows手机上，它显示的更大。字体大小em在某些设备上显示不同

我的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

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

来源

2012-08-24 Lee

你可以发布来自不同移动浏览器的屏幕截图吗？ –

em是相对于当前字体大小的度量。如果浏览器都有不同的默认基本字体大小，那么它们看起来会不同。尝试使用pt而不是它适用于不同大小的屏幕，并不像px那样是固定的。

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

来源

2012-08-24 16:44:47

谢谢，我忘记了'pt'。 – Lee

pt也是固定大小。可能与px不同，但仍然可以。 –

你说得对，w3schools指出它约为1/72英寸。 – Lee

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

要更清楚这里是一个链接，以帮助解释为什么我建议在body元素上使用像素大小，而只有那个元素。 http://www.alistapart.com/articles/fluidgrids/

来源

2012-08-24 16:44:27 hradac

感谢您的回答。我明白'em'的大小是相对的，这就是我采纳它们的原因。我曾考虑过使用像素尺寸，但是这对于移动设备来说不是一种否定的方式吗？ – Lee

我的建议是，您使用一次像素大小来为所有'ems'设置一个基线。每个浏览器的默认文本大小不同，因此'ems'以不同的基准大小开始。在'body'上设置显式大小可以让你所有的'ems'从相同的大小开始。在这种情况下1em = 16px。 – hradac

-1

如果你希望让每一个浏览器使用其默认字体大小，可能适用于设备，根本就不是在所有设置正文字体大小和不使用meta标签，以防止结垢，因为你现在。

如果您认为“适合所有人”是您的选择，请使用像素或点（不同方法）设置字体大小，而不是试图使用em单位实现。

来源

2012-08-24 16:52:32

好的，但没有meta标签，缩放关闭，需要用户捏缩放。使用'pt'完美工作。 – Lee

在CSS文件中的行没有1显示

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

与

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

它会工作取代它！

来源

2013-08-15 14:23:11

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

回答

相关问题