Chrome 開發者工具中的圖片尺寸

Question

我正在研究Mozilla 的響應式圖像教程。 本教程的一部分解釋了如何使用瀏覽器開發人員工具的響應式設計功能來查看嵌入圖像在各種顯示尺寸上的像素尺寸。

它要求學生在瀏覽器中查看他們的演示頁面，並打開響應式設計開發人員工具。 我正在使用 Chrome 並做到了這一點。 然后我將屏幕尺寸設置為320 X 480 ，並檢查頁面正文中的第一張圖片。 但是，Chrome 表示圖片的尺寸為800 X 464 。 如果屏幕本身只有320 X 480 ，那怎么可能呢？

此外，我在 Firefox 中進行了嘗試，Firefox 給出了280 X 162.4 。

所以：

1. 所有這些維度的單位是什么？ 我假設所有尺寸都以像素為單位，但分數像素並沒有真正意義。
2. 假設單位都一樣，為什么Chrome中的圖片比屏幕大，為什么Chrome不同意Firefox？

Answer 1

通常，移動瀏覽器使用以下策略來顯示未針對移動優化的網站：它們將它們呈現為顯示在小型桌面上（即在“虛擬視口”上，通常為 800 到 1000 像素寬），以及然后縮小結果以適合移動屏幕。 Peter Paul Koch 有一篇經典文章“兩個視口的故事”（特別是第二部分）對此進行了很好的解釋。

Chrome 開發工具的響應設計模式似乎假設這種行為正在發生並且“虛擬視口”是 980 像素寬。 Firefox 不這樣做，使虛擬視口等於實際窗口大小。 設置<meta name="viewport" contents="device-width">使所有瀏覽器（包括真正的移動瀏覽器）都執行后者。

所以：

1. 單位是縮放前的 CSS 像素。 非整數像素對計算有意義，當瀏覽器呈現它們時，它們會被四舍五入。

2. 圖片比屏幕大，因為虛擬視口縮小了。 這可以通過設置<meta name="viewport" contents="device-width">來防止。

Answer 2

Mozilla Firefox 開發人員工具向您顯示實際顯示的圖像大小，而 Google Chrome 開發人員工具顯示實際圖像大小。

所以我們可以說 Google Chrome 和 Mozilla Firefox 都沒有錯，它們只是顯示不同的圖像大小，因為它們的設計者選擇這樣做。

Answer 3

下載的圖像可能大於屏幕上顯示的圖像。 如果下載的圖像對於視圖空間來說太大，它會縮小圖像以適應。

在 Chrome 90 中，將鼠標懸停在 Dev Tools Elements 檢查器中的圖像 URL 上時，工具提示將顯示Rendered size和Intrinsic size 。 內在大小是下載的大小。

在 Firefox 中，將鼠標懸停在其檢查器中的圖像 URL 上將在圖像的彈出縮略圖下顯示實際圖像大小（下載大小），並將在頁面視圖中的圖像上顯示渲染大小。

在真實的移動設備上，渲染的大小實際上可能比這些瀏覽器移動視圖指示的要大。 截至撰寫本文時，移動屏幕尺寸通常為 1080 x 1920 像素或更密集（Google Pixel 5 具有 FHD+ 屏幕 (1080 x 2340)）。 瀏覽器移動視圖可能會指示視圖大小類似於 320 x 480（取決於選擇的設備）。