瞭解響應式圖像和設備像素比例

Question

我試圖在我的網站上使用srcset和大小實現響應式圖像。在我的電腦上進行測試時，所有外觀和工作都很棒與當前頁面寬度相比，下載的圖像是次最大的圖像（500px的頁面寬度將檢索720px寬的圖像）。這是我用什麼：

<img src="image-240w.jpg" 
    srcset="image-1140w.jpg 1140w, 
     image-940w.jpg 940w, 
     image-720w.jpg 720w, 
     image-480w.jpg 480w, 
     image-240w.jpg 240w" 
    sizes="(max-width: 1140px) 100vw, 1140px"> 

在我的手機是我困惑的地方。我有一個具有1920x1080分辨率屏幕的Nexus 5X，設備像素比率爲2.5。通過將視口元添加到我的頁面（<meta name="viewport" content="width=device-width, initial-scale=1">），媒體查詢按預期做出響應 - 就好像我的設備寬度僅超過400px（1080px/4 = 432px）。爲了支持下面的例子A.這是一個480像素寬的圖像，如預期的那樣，掛在頁面的邊緣約48px。示例B是1140像素寬的圖像，顯​​然比432px寬的視口大很多。示例C是上面的img標記的結果（並且是我的目標）。

起初，我感到高興的是一切工作。但是，使用我的開發人員工具查看時，可以看到使用srcset的img標記實際下載了1140像素寬的圖像。在我看來，應該已經選擇了480px寬的圖像（僅比432px寬的視窗大）。相反，下載的圖像是用於1080像素寬屏幕的圖像。

爲什麼媒體查詢會如我所預期的那樣響應（就好像我的屏幕只有432px寬），但響應式圖像只關心與真實屏幕分辨率相匹配的圖像大小？它必須與2.5像素比例有關，但我不知道如何。

我的目標是在我的設備上，我會得到480像素的圖像，而不是最大的。我該如何做到這一點？

編輯

或許我的願望是不正確的，而瀏覽器做什麼它應該做的事情。解釋爲什麼，當一個480像素寬的圖像已經懸掛在屏幕邊緣時，它應該仍然會選擇1140像素寬的圖像。

接聽/證明

正如下面的答案中指出，設備做什麼它應該做。爲了證明一點，這裏是我的設備（432個CSS像素，但1080個設備像素），顯示一個480像素和1140像素的圖像。儘管480px圖像與CSS像素匹配，但與匹配設備像素的1140px圖像相比，它非常模糊。所以，該設備知道最好的，雖然我期望它選擇較小的圖像，但它知道它需要較大的圖像（來自 響應的srcset和大小）才能正確呈現圖像。

Answer 1

答案是：是的，它具有與該設備的像素比例做。是的，該設備是正確的。

的圖像顯示正確，因爲如果你不重寫與CSS的圖像尺寸使用sizes屬性（在你的情況"100vw"，這是〜"100%"）（如果您改變sizes到"50vw"你會得到解決"50%"寬度）。

關鍵部分是像素有不同的概念。

普通媒體查詢（最小寬度，最大寬度...）是在所謂的佈局像素（也是CSS像素）中測量的。這些像素是真實物理像素（設備像素）的抽象，以具有令人滿意和可靠的像素單位來爲視網膜屏幕（以及有時非常低分辨率的屏幕）做佈局內容（CSS）。使用物理像素作爲佈局像素意味着在小而高分辨率的設備上顯示非常非常小的佈局對象。在CSS世界中，像素意味着佈局像素。這通過設備像素/設備像素比率來計算。

但是，在圖像的情況下，它的所有關於您的設備真正有多少像素。如果屏幕寬度爲1000像素，圖像顯示爲100vw，則加載1000像素寬度的圖像以滿足屏幕的全部質量是有意義的。 （=每個物理屏幕像素獲得一個實際圖像像素分配。）

如果這些1000個物理像素僅在360個佈局像素中測量，這甚至可以理解。

另請參閱：A pixel is not a pixel。