CSS像素字體大小的一致性

假設我想渲染兩個大寫字母'T'，兩個高度都是，正好是。一個'T'在具有Retina Display（220 DPI，CSS像素比例2）的Macbook Pro上呈現，另一個在iPhone 4S（326 DPI，CSS像素比率2）上呈現。爲此，我將Macbook Pro上的字體大小設置爲220/2 = 110px，並將iPhone 4S上的字體大小設置爲326/2 = 163px。但是，兩個'T的are still not the same size。爲什麼？另外，我可以做些什麼來確保這兩個'T's具有相同的物理尺寸？CSS像素字體大小的一致性

編輯：是的，我正在使用媒體查詢。我不想進入血淋淋的細節，但我通過提及使用CSS像素比例來暗示它。假設我在某種程度上奇蹟般地能夠獲得客戶端顯示器的DPI和CSS像素比例。

感謝您的洞察！

來源

2012-09-03 void-pointer

乖乖，我的老天爺。我哦，我的。 –

確保每個人都使用相同的顯示器。 –

@MikeB對，但我不應該通過DPI縮放來糾正這個問題嗎？可以理解的是，在不同瀏覽器中使用相同像素值聲明的字體大小應該存在細微差異。不過，我在兩種情況下都使用Safari。 –

我認爲這個必須完成的概念是媒體查詢，沒有提到你正在使用媒體查詢來做這件事。您可以使用媒體查詢，以獲得所需的效果同時針對iPhone以及iOS版：

更是here

來源

2012-09-03 04:07:18 defau1t

我正在使用媒體查詢，但我不想進入血淋淋的細節。我在我的問題中提到了CSS像素比例，暗示了這一點。 –

我將其標記爲媒體查詢以吸引相關觀衆。 – defau1t

CSS像素字體大小的一致性

回答

相關問題