移動相比，桌面上的字體大小差異

Question

即時通訊創建一個網站使用HTML和CSS，但我只是想知道是否有人知道所有平臺上的文字大小之間的差異。

如果我在桌面上創建20px的字體大小，在移動設備上看起來會非常小，並且您無法讀取它，因此字體大小通常在移動設備上更大？

Answer 1

你說得對。 查看EM（元素單位）和REM（相對元素單位）的大小調整元素。還添加以下代碼到你的頭可能會解決你的問題：

<meta name="viewport" content="width=device-width, initial-scale=1"> 

Answer 2

沒有正確的meta標籤，yes文本將是超級小。

...字體大小通常在移動設備上更大？

不，通常不。因爲，大多數提供響應式版本的網站都不會告訴他們的網頁是80px（或其他），所以文本並不是很小。

移動設備具有所謂的設備寬度。這個設備寬度通常每個CSS像素包含多個設備像素。我有一個三星Galaxy S6，其設備像素與CSS像素比例爲4：1。這意味着每個CSS像素有4個設備像素。此設備的分辨率（設備像素）爲1440 x 2560，但CSS像素分辨率爲360 x 640.

在桌面計算機上開發網站時，如果您指定的元素寬度爲100像素，則實際上使用CSS像素。您可能認爲它是一個設備像素（就像我曾經做過的那樣），因爲幾乎所有臺式機顯示器的設備像素與CSS像素比例均爲1：1。

當使用響應式元標記（如下圖所示），並且您將元素指定爲300px寬時，它將佔用大部分屏幕寬度，因爲該元素將繪製在360 CSS像素寬的畫布上，而不是1440設備像素寬的畫布（這是沒有適當的meta標籤時發生的情況，並給出了在移動設備上縮小爲「」的網站的外觀）。

<meta name="viewport" content="width=device-width, initial-scale=1"> 

幫助鏈接：

• Quirks Mode, A pixel is not a pixel is not a pixel
• WebPlatform Docs, Understanding CSS Units
• mydevice.io - 顯示當前裝置設定。
• mydevice.io/devices

希望一切都有道理，我試圖保持它「簡單」。