我的目標是為同一幅圖像提供不同版本(分辨率/大小)的服務，它應該占據視窗寬度的100%，這樣我就可以為移動設備提供800px的版本(或者，一般來說，為具有較小顯示器或較慢連接的設備)，為較大的桌面顯示器提供1366px及以上的版本。

問題是，我正在用Chromium設備模擬器測試它，一些小屏幕設備加載1366px版本，而不是800px:iP hone 6/7/8(375 px寬度)加載800px圖像，但iPad (768px)、Nexus 5 (360px)和iPhoneX (375px)都加載1366px，而不是加載800 px。

我不太確定是否正確理解了sizes指令，以下是我的代碼，默認src引用2880px版本只是為了幫助測試:

<img class="img-fluid" 
    srcset="img/dreamstime_800w_109635242.jpg 800w,
         img/dreamstime_1366w_109635242.jpg 1366w,
         img/dreamstime_2880w_109635242.jpg 2880w"
    sizes="(max-width: 800px) 100vw,
        (max-width: 1366px) 100vw,                      
        2880px 100vw"
    src="img/dreamstime_2880w_109635242.jpg"/>

您的size屬性告訴瀏覽器圖像總是以全視區寬度顯示，因此您可以簡單地用sizes = " 100vw "替換它。

因此，瀏覽器采用當前的視窗寬度，乘以屏幕密度，并給出所需圖像的寬度。然后，它從srcset的列表中選取最接近的圖像。

您不能使用它來“向移動設備提供800px版本”，因為現在大多數移動設備的密度都比桌面設備大，并且您不能用& ltimg src set…size…>。

如果真的要忽略屏幕密度(什么原因？)和:

為小型設備提供最小的圖像， 向介質設備提供介質映像 為大型設備提供大型圖像 保留最大的圖像作為備用 那你就得用& lt圖片& gt像這樣的媒體詢問:

超文本標記語言 & lt圖片& gt & ltsource media = "(max-width:800 px)" srcset = " img/dream stime _ 800 w _ 109635242 . jpg 800 w " & gt； & ltsource media = "(max-width:1366 px)" srcset = " img/dreams time _ 1366 w _ 109635242 . jpg 1366 w " >& ltimg src = " img/dream stime _ 2880 w _ 109635242 . jpg " & gt； & lt/圖片& gt

這和視網膜顯示器有關(我想還有他們的DPI)。

據我所知，retina顯示屏會選擇兩倍或三倍于其顯示屏寬度的第一幅圖像，這取決于它們各自的retina顯示屏(2倍、3倍等)。

另一個簡單的解決方案是清空瀏覽器緩存。如果你最大最差的圖片已經被緩存了，Chrome(舉例來說)會一直加載那個圖片。

對于未來的讀者，我很難理解為什么srcset完全忽略了我的嘗試。經過幾個小時的沮喪和憤怒，我得到了世界上最明顯的答案——我正在開發Retina Macbook Pro，我沒有觸發像素密度。

我把它改成

<img class="<?= $image_class;?>" data-caption="<?php echo $image['alt']; ?>"
data-src="<?php echo $image['sizes']['medium']; ?>"
data-srcset="<?php echo $image['sizes']['medium']; ?> 600w 2x, 
<?php echo $image['sizes']['large']; ?> 1280w 2x"
sizes="(min-width: 150px) 600px, 100vw"
width="150" height="150"
alt="<?php echo $image['alt']; ?>">

一切都正常——至少我能知道發生了什么。 唷。 大家圣誕快樂！

用Chrome模擬器測試我的網頁時，我有時會發現(像你一樣)加載了一個比需要的大的圖像，特別是在小型移動設備上。我終于意識到，這不是我的錯誤，而是Chrome從緩存中提取了一個更大的圖像，如果那里碰巧有一個的話。測試時單擊模擬器中的復選框禁用緩存，問題消失了，我期望看到加載的大小實際上已經加載了。

我注意到當chrome devTools打開并啟用響應模式時，我的設備像素比率從1變為2。因此，即使在“網絡”選項卡中禁用了緩存，在我看來，瀏覽器加載的文件似乎比需要的要大，但這是因為像素比率在以下情況下發生了變化:

devTools已打開 響應模式已啟用 您可以使用一個簡單的javascript alert在任何給定時間仔細檢查像素比率:

& lt腳本& gtalert(window . devicepixelrratio)& lt；/script & gt；

如果您嘗試以多種寬度加載頁面進行測試，很可能會啟用響應模式，但這也可能會改變像素密度。因此，它可能只是像它對我的意圖一樣工作。

簡單回答:

sizes="(max-width: 999px) 50vw, 100vw"