2012-08-24 70 views
3

我正在为网络创建主要为移动设备设计的聊天程序。我的问题是,在尽量适合移动设备的情况下,我放弃了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

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

+0

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

回答

4

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

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

+0

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

+2

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

+0

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

1

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

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

+0

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

+0

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

-1

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

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

+0

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

0

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

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

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

它会工作取代它!

相关问题