字體大小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在某些設備上顯示不同

回答

相關問題